Bump firmware to 1.5.0

Fix ee02 button-wakeup build: ext1 fallback for ESP32-S3
esp_sleep_enable_gpio_wakeup_on_hp_periph_powerdown() only exists on ESP32-C6 (SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP), so the ee02 (ESP32-S3) build failed with implicit-declaration errors in {back,next,combo}_button.c once the epd13in3e driver's #error stopped masking it. Each button file now branches on that capability macro: the C6 path (devkit/xiao) is untouched, and ESP32-S3 uses esp_sleep_enable_ext1_wakeup_io() instead. The earlier ext1 attempt was rejected on C6 hardware because its pull resistor didn't hold across RTC_PERIPH power-down -- tracing the same path in ESP-IDF source shows gpio_config()'s pull_up_en already delegates to rtc_gpio_pullup_en() for RTC-capable pins on every non-original-ESP32 target, so the pull-up should already survive the same power-down on S3. The _io() variant is additive, so the three button files don't need cross-file mask coordination. Also widens the button GPIO Kconfig range for IDF_TARGET_ESP32S3 (0-21, matching its RTC-IO set) instead of the C6-shaped 0-7. Verified: ee02, devkit, and xiao all build clean end-to-end locally (native ESP-IDF v6.0, no Docker in this sandbox). NOT verified: whether this actually avoids the spurious-instant-wakeup bug on real EE02 hardware -- that failure mode was only ever confirmed empirically, not root-caused in a way a compile can check. continue-on-error stays on in CI's ee02 build step until that's confirmed.
2026-08-04 23:22:51 +00:00 · 2026-08-04 22:46:13 +00:00 · 2026-08-04 22:00:18 +00:00 · 2026-08-04 20:50:29 +00:00 · 2026-08-04 20:08:22 +00:00 · 2026-08-04 18:33:29 +00:00
144 changed files with 7574 additions and 1387 deletions
@@ -1,10 +1,11 @@
 ---
 name: build-firmware
-description: Compile the espresso_frame ESP32-C6 firmware (firmware/) for both board variants without Docker -- a native, non-container ESP-IDF v6.0 install. Use when asked to build the firmware, verify a firmware/main/*.c change actually compiles, or check both the devkit and xiao board targets.
+description: Compile the espresso_frame firmware (firmware/) for all three board variants (ESP32-C6 devkit/xiao, ESP32-S3 ee02) without Docker -- a native, non-container ESP-IDF v6.0 install. Use when asked to build the firmware, verify a firmware/main/*.c change actually compiles, or check the devkit/xiao/ee02 board targets.
 ---

-Compiles `firmware/` (ESP-IDF, targeting ESP32-C6) locally, without
-Docker -- CI's `firmware-build-check.yml`/`firmware-release-build.yml`
+Compiles `firmware/` (ESP-IDF, targeting ESP32-C6 for devkit/xiao and
+ESP32-S3 for ee02) locally, without Docker -- CI's
+`firmware-build-check.yml`/`firmware-release-build.yml`
 build inside the `espressif/idf:release-v6.0` container image, but
 **this sandbox cannot run containers at all**: `docker.io` installs and
 `dockerd` starts fine even as root, but the sandbox strips
@@ -39,13 +40,13 @@ had neither):
  of `release/v6.0` (~700MB) into `~/.espressif-idf/esp-idf` -- matches
  the IDF version CI's Docker image pins. Only clones once; re-running
  `setup.sh` never touches an existing checkout.
- The esp32c6 toolchain + Python venv, via ESP-IDF's own
-  `./install.sh esp32c6` -- scoped to just this project's one target
-  (see `firmware/README.md`'s board table), not every chip ESP-IDF
-  supports, to keep the download/disk footprint down. `install.sh` is
-  already idempotent on its own, so `setup.sh` always calls it rather
-  than duplicating that check -- a re-run costs a few seconds once
-  everything's cached.
+- The esp32c6+esp32s3 toolchains + Python venv, via ESP-IDF's own
+  `./install.sh esp32c6,esp32s3` -- scoped to just this project's two
+  chip targets (see `firmware/README.md`'s board table: devkit/xiao are
+  esp32c6, ee02 is esp32s3), not every chip ESP-IDF supports, to keep
+  the download/disk footprint down. `install.sh` is already idempotent
+  on its own, so `setup.sh` always calls it rather than duplicating
+  that check -- a re-run costs a few seconds once everything's cached.

 Takes a few minutes on a cold run (mostly `install.sh`'s own pip/tool
 downloads), well under a minute on a re-run. Needs real root (`apt-get
@@ -63,15 +64,17 @@ checkout itself). Confirmed working with as little as ~7GB free.
 ```bash
 bash .claude/skills/build-firmware/build.sh            # devkit (default)
 bash .claude/skills/build-firmware/build.sh xiao
-bash .claude/skills/build-firmware/build.sh both        # both variants
+bash .claude/skills/build-firmware/build.sh ee02
+bash .claude/skills/build-firmware/build.sh both        # devkit + xiao
+bash .claude/skills/build-firmware/build.sh all         # devkit + xiao + ee02
 ```

 Each board gets its own build directory and generated sdkconfig (see
 `firmware/build_for_board.sh`'s own comment) -- building one never
-disturbs the other. `build.sh` auto-runs `set-target esp32c6` the very
-first time a board is built (no generated sdkconfig yet); later builds
-skip straight to `idf.py build`. Extra arguments pass straight through
-to `idf.py`, e.g.:
+disturbs the other. `build.sh` auto-runs `set-target` (esp32c6 for
+devkit/xiao, esp32s3 for ee02) the very first time a board is built (no
+generated sdkconfig yet); later builds skip straight to `idf.py build`.
+Extra arguments pass straight through to `idf.py`, e.g.:

 ```bash
 bash .claude/skills/build-firmware/build.sh xiao flash -p /dev/ttyUSB0
@@ -83,15 +86,16 @@ somewhere hardware is actually plugged in (a real dev machine, or a
 differently-configured environment with device passthrough).

 A clean build of one board takes ~30s once the target's already been
-configured (~1,000 build steps total split across both boards, most of
+configured (~1,000 build steps total split across the boards, most of
 it ESP-IDF's own components -- this project's own `firmware/main/*.c`
 and `firmware/components/*` sources are a small fraction of that and
 compile in a few seconds). Output lands at
-`firmware/build/espresso_frame.bin` (devkit) or
-`firmware/build_xiao/espresso_frame.bin` (xiao) -- both paths are
-gitignored (`firmware/.gitignore`... actually the repo root
-`.gitignore`'s "ESP-IDF firmware build output" section), so nothing
-here needs cleaning up before a commit.
+`firmware/build/espresso_frame.bin` (devkit),
+`firmware/build_xiao/espresso_frame.bin` (xiao), or
+`firmware/build_ee02/espresso_frame.bin` (ee02, once its driver actually
+compiles -- see the note above) -- all three paths are gitignored (the
+repo root `.gitignore`'s "ESP-IDF firmware build output" section), so
+nothing here needs cleaning up before a commit.

 ## Verified

@@ -2,16 +2,25 @@
 # Builds (or flashes/monitors, if a serial port is actually attached)
 # the espresso_frame firmware for one board variant, via the project's
 # own firmware/build_for_board.sh -- this script just sources the
-# ESP-IDF environment first and auto-runs `set-target esp32c6` on a
-# board's very first build (a fresh clone has no generated sdkconfig
-# yet, same reasoning as CI's own build steps -- see firmware/README.md's
-# "Building for the Seeed XIAO ESP32-C6" section).
+# ESP-IDF environment first and auto-runs `set-target` (esp32c6 for
+# devkit/xiao, esp32s3 for ee02) on a board's very first build (a fresh
+# clone has no generated sdkconfig yet, same reasoning as CI's own build
+# steps -- see firmware/README.md's "Building for the Seeed XIAO
+# ESP32-C6" section).
+#
+# NOTE: ee02 builds will fail to compile -- deliberately -- until
+# firmware/components/epd13in3e's panel driver is ported from vendor
+# demo code (see that component's own top-of-file comment). The build
+# plumbing itself (target selection, partition table, sdkconfig
+# layering) is exercised regardless; only the final compile step fails.
 #
 # Usage:
 #   build.sh                        # build devkit (default)
 #   build.sh devkit
 #   build.sh xiao
-#   build.sh both                   # build both board variants
+#   build.sh ee02
+#   build.sh both                   # build devkit + xiao (unchanged meaning)
+#   build.sh all                    # build devkit + xiao + ee02
 #   build.sh xiao flash -p /dev/ttyUSB0   # only meaningful with real hardware attached
 set -euo pipefail

@@ -33,16 +42,17 @@ cd "$firmware_dir"
 build_one() {
  local board="$1"
  shift
-  local sdkconfig
+  local sdkconfig target
  case "$board" in
-    devkit) sdkconfig="sdkconfig" ;;
-    xiao) sdkconfig="sdkconfig.xiao_local" ;;
-    *) echo "Unknown board '$board' -- expected 'devkit' or 'xiao'" >&2; exit 1 ;;
+    devkit) sdkconfig="sdkconfig"; target="esp32c6" ;;
+    xiao) sdkconfig="sdkconfig.xiao_local"; target="esp32c6" ;;
+    ee02) sdkconfig="sdkconfig.ee02_local"; target="esp32s3" ;;
+    *) echo "Unknown board '$board' -- expected 'devkit', 'xiao', or 'ee02'" >&2; exit 1 ;;
  esac

  if [ ! -f "$sdkconfig" ]; then
-    echo "==> $board: no generated sdkconfig yet, setting target esp32c6"
-    ./build_for_board.sh "$board" set-target esp32c6
+    echo "==> $board: no generated sdkconfig yet, setting target $target"
+    ./build_for_board.sh "$board" set-target "$target"
  fi

  local args=("$@")
@@ -55,9 +65,17 @@ build_one() {
 board="${1:-devkit}"
 shift || true

-if [ "$board" = "both" ]; then
-  build_one devkit "$@"
-  build_one xiao "$@"
-else
-  build_one "$board" "$@"
-fi
+case "$board" in
+  both)
+    build_one devkit "$@"
+    build_one xiao "$@"
+    ;;
+  all)
+    build_one devkit "$@"
+    build_one xiao "$@"
+    build_one ee02 "$@"
+    ;;
+  *)
+    build_one "$board" "$@"
+    ;;
+esac
@@ -45,14 +45,15 @@ else
  echo "esp-idf already cloned at $IDF_DIR"
 fi

-# 3. Toolchain + Python virtualenv, scoped to esp32c6 only -- this
-# project's one target (see firmware/README.md's board table). Scoping
-# avoids downloading toolchains for every chip ESP-IDF supports, which
-# matters given this container's disk headroom. install.sh is already
+# 3. Toolchain + Python virtualenv, scoped to esp32c6+esp32s3 only --
+# this project's two chip targets (see firmware/README.md's board
+# table: devkit/xiao are esp32c6, ee02 is esp32s3). Scoping avoids
+# downloading toolchains for every chip ESP-IDF supports, which matters
+# given this container's disk headroom. install.sh is already
 # idempotent on its own (checks what's present and skips it), so this
 # always calls it rather than trying to duplicate that check here --
 # a re-run only costs a few seconds once everything's cached.
-echo "running esp-idf install.sh esp32c6 (fast if already installed) ..."
-(cd "$IDF_DIR" && ./install.sh esp32c6)
+echo "running esp-idf install.sh esp32c6,esp32s3 (fast if already installed) ..."
+(cd "$IDF_DIR" && ./install.sh esp32c6,esp32s3)

 echo "setup complete -> $IDF_DIR/export.sh (build.sh sources this for you)"
@@ -1,6 +1,6 @@
 ---
 name: make-widget
-description: Scaffold a new widget type for the espresso_frame server (the ~13-file checklist a widget type touches -- config table, grid footprint, render module, registry, migration, config-save + endpoints, dialog template + JS, script tag, WIDGET_LABELS, docs, tests). Use when asked to add a new widget type to a frame's panel (e.g. "add a text widget", "add an RSS widget", "add a weather-only widget").
+description: Scaffold a new widget type for the espresso_frame server (the ~14-file checklist a widget type touches -- config table, grid footprint, render module, registry, migration, config-save + endpoints, dialog template + JS, script tag, WIDGET_LABELS, docs, saved-layout config allowlist, tests). Use when asked to add a new widget type to a frame's panel (e.g. "add a text widget", "add an RSS widget", "add a weather-only widget").
 ---

 Adding a widget type is a very consistent, repeated pattern in this
@@ -114,6 +114,16 @@ Pick your template accordingly:
    `MIN_FOOTPRINT` prose line, the `app/widgets/` module list. This is
    the project's own "start here" doc per `CLAUDE.md` -- don't ship a
    widget without it staying accurate.
+14. **`app/routers/api_layouts.py`** -- add a `"<type>": (...)` entry to
+    `LAYOUT_CONFIG_FIELDS` listing the config columns that are an
+    authored *setting* (as opposed to runtime/cache state like a fetch
+    cache or queue position, which a saved layout deliberately leaves
+    out -- see the dict's own comment). Skipping this doesn't error or
+    warn anywhere: the widget just silently saves/applies with an empty
+    `{}` config forever, resetting to defaults on every layout apply or
+    hold-to-cycle. This actually shipped missing for the weather widget
+    -- caught only because a user noticed layout-cycling kept resetting
+    its city/mode.

 ## Tests (`server/tests/`)

@@ -138,6 +148,13 @@ Pick your template accordingly:
 - Any pure-logic helper module (decoding, parsing -- like
  `app/image_upload.py`) gets its own `test_<module>.py`: no HTTP, no
  DB, just the function.
+- `test_saved_layouts.py` -- a `test_save_and_apply_round_trip_<type>_settings`
+  test: set every field the new `LAYOUT_CONFIG_FIELDS` entry lists,
+  save a layout, assert the `SavedLayoutWidget.config` snapshot has them
+  all, delete the frame's widgets, apply the layout back, assert the
+  new widget's config matches -- and that any runtime/cache field
+  (`checked_at`, a fetch cache, a queue) was *not* carried over. See
+  `test_save_and_apply_round_trip_weather_settings` for the pattern.

 Run the full suite before calling it done:

@@ -11,6 +11,7 @@ mkdir -p "$SCRATCH"

 DATABASE_URL="sqlite:///$SCRATCH/test.db" \
 CONFIG_PATH="$SCRATCH/config.json" \
+LOG_PATH="$SCRATCH/app.log" \
 .venv/bin/uvicorn app.main:app --host 127.0.0.1 --port "$PORT" \
  > "$SCRATCH/server.log" 2>&1 &
 PID=$!
@@ -3,9 +3,11 @@ name: Firmware build check
 # Fires on every push touching firmware source, unlike
 # firmware-release-build.yml (which only builds+publishes when
 # firmware/version.txt itself is bumped -- the "cut a release" signal).
-# This just verifies both board variants still compile; nothing else in
-# CI catches a firmware/** push that breaks the build until someone
-# happens to bump the version next.
+# This just verifies every board variant still compiles (or, for ee02,
+# that everything up to its known/tracked #error still compiles --
+# see that step's own comment); nothing else in CI catches a
+# firmware/** push that breaks the build until someone happens to bump
+# the version next.
 on:
  push:
    branches: [main]
@@ -49,3 +51,26 @@ jobs:
          docker cp "$PWD/." "$cid:/workspace"
          docker start -a "$cid"
          docker rm "$cid"
+
+      # Expected to fail until firmware/components/epd13in3e's panel
+      # driver is ported from vendor demo code (deliberate #error, see
+      # that file's own top comment) -- continue-on-error so this known
+      # gap doesn't block every other firmware/** push. Still worth
+      # running: catches a regression in the surrounding scaffolding
+      # (Kconfig, main/CMakeLists.txt's component selection, sdkconfig
+      # layering) up to the point of that #error, same value a build
+      # check normally provides. Remove continue-on-error once
+      # epd13in3e's driver is real, so a build failure here goes back to
+      # being a genuine regression signal.
+      - name: Build (ee02 -- Seeed EE02, XIAO ESP32-S3 Plus + 13.3in panel)
+        continue-on-error: true
+        run: |
+          cid=$(docker create -w /workspace/firmware espressif/idf:release-v6.0 bash -c '
+            git config --global --add safe.directory /workspace &&
+            . "$IDF_PATH/export.sh" &&
+            ./build_for_board.sh ee02 set-target esp32s3 &&
+            ./build_for_board.sh ee02 build
+          ')
+          docker cp "$PWD/." "$cid:/workspace"
+          docker start -a "$cid"
+          docker rm "$cid"
@@ -18,7 +18,7 @@ jobs:
    # actions) is a Node action that gets exec'd *inside* whatever container
    # the job specifies, so checkout fails immediately with "node: not
    # found" (hit this on the first real run). Checkout instead runs on the
-    # plain runner (which has Node), and only the two build steps below
+    # plain runner (which has Node), and only the three build steps below
    # spin up the ESP-IDF image themselves (docker create/cp/start, see the
    # comment on those steps for why not a plain `docker run -v`) -- the
    # runner already bind-mounts the host's docker socket, so docker-in-
@@ -33,11 +33,13 @@ jobs:
        id: version
        run: echo "version=$(tr -d '[:space:]' < firmware/version.txt)" >> "$GITHUB_OUTPUT"

-      # Two board variants, two partition tables/flash sizes (see
-      # firmware/README.md's "Building for the Seeed XIAO ESP32-C6"
-      # section) -- build_for_board.sh gives each its own build dir/
-      # generated sdkconfig so this never fights over shared state.
-      # set-target first since a fresh checkout has no cached sdkconfig
+      # Three board variants: devkit/xiao (ESP32-C6, different partition
+      # tables/flash sizes -- see firmware/README.md's "Building for the
+      # Seeed XIAO ESP32-C6" section) and ee02 (ESP32-S3 + 13.3" panel,
+      # a genuinely different chip target, not just a Kconfig variant).
+      # build_for_board.sh gives each its own build dir/generated
+      # sdkconfig so this never fights over shared state. set-target
+      # first since a fresh checkout has no cached sdkconfig
      # (firmware/sdkconfig* is gitignored, see firmware/.gitignore).
      # safe.directory guards against git's "dubious ownership" check,
      # since the container runs as root over content owned by a
@@ -64,8 +66,15 @@ jobs:
          ')
          docker cp "$PWD/." "$cid:/workspace"
          docker start -a "$cid"
-          docker cp "$cid:/workspace/firmware/build/espresso_frame.bin" /tmp/release-assets/firmware-devkit.bin
+          docker cp "$cid:/workspace/firmware/build/espresso_frame.bin" /tmp/release-assets/firmware-devkit_esp32c6.bin
          docker rm "$cid"
+          # Rename bridge: fielded devices flashed before this rename still
+          # report the bare "devkit" board name and look up "firmware-
+          # devkit.bin" for their OTA check -- publish a duplicate under
+          # the old name too so they can update at all. Safe to drop this
+          # duplicate in a later release once no fielded device reports
+          # the bare name anymore.
+          cp /tmp/release-assets/firmware-devkit_esp32c6.bin /tmp/release-assets/firmware-devkit.bin

      - name: Build (xiao -- Seeed XIAO ESP32-C6)
        run: |
@@ -77,7 +86,35 @@ jobs:
          ')
          docker cp "$PWD/." "$cid:/workspace"
          docker start -a "$cid"
-          docker cp "$cid:/workspace/firmware/build_xiao/espresso_frame.bin" /tmp/release-assets/firmware-xiao.bin
+          docker cp "$cid:/workspace/firmware/build_xiao/espresso_frame.bin" /tmp/release-assets/firmware-xiao_esp32c6.bin
+          docker rm "$cid"
+          # Same rename-bridge reasoning as the devkit step above.
+          cp /tmp/release-assets/firmware-xiao_esp32c6.bin /tmp/release-assets/firmware-xiao.bin
+
+      # NOTE: this build is expected to FAIL until
+      # firmware/components/epd13in3e's panel driver is ported from
+      # vendor demo code (see that component's own top-of-file comment
+      # -- a deliberate #error, not a bug here). `continue-on-error` so
+      # this known, tracked gap doesn't block publishing the devkit/xiao
+      # release (those boards work today and shouldn't wait on ee02) --
+      # this step's own status still shows failed/red individually in
+      # the run's step list, it just doesn't fail the overall job. Once
+      # epd13in3e's driver is real, a build failure here becomes a
+      # genuine regression again -- remove `continue-on-error` at that
+      # point so it goes back to failing the job like the other two
+      # builds do.
+      - name: Build (ee02 -- Seeed EE02, XIAO ESP32-S3 Plus + 13.3in panel)
+        continue-on-error: true
+        run: |
+          cid=$(docker create -w /workspace/firmware espressif/idf:release-v6.0 bash -c '
+            git config --global --add safe.directory /workspace &&
+            . "$IDF_PATH/export.sh" &&
+            ./build_for_board.sh ee02 set-target esp32s3 &&
+            ./build_for_board.sh ee02 build
+          ')
+          docker cp "$PWD/." "$cid:/workspace"
+          docker start -a "$cid"
+          docker cp "$cid:/workspace/firmware/build_ee02/espresso_frame.bin" /tmp/release-assets/firmware-ee02.bin
          docker rm "$cid"

      # Plain stdlib urllib rather than `requests` -- not guaranteed to be
@@ -149,10 +186,25 @@ jobs:
          existing_assets = {a["name"]: a["id"] for a in release.get("assets", [])}

          assets = [
+              ("firmware-devkit_esp32c6.bin", "/tmp/release-assets/firmware-devkit_esp32c6.bin"),
+              ("firmware-xiao_esp32c6.bin", "/tmp/release-assets/firmware-xiao_esp32c6.bin"),
+              ("firmware-ee02.bin", "/tmp/release-assets/firmware-ee02.bin"),
+              # Rename-bridge duplicates for devices still on old firmware
+              # reporting the bare "devkit"/"xiao" board names -- see the
+              # build steps above. Safe to remove once no fielded device
+              # reports the bare name anymore.
              ("firmware-devkit.bin", "/tmp/release-assets/firmware-devkit.bin"),
              ("firmware-xiao.bin", "/tmp/release-assets/firmware-xiao.bin"),
          ]
          for name, path in assets:
+              if not os.path.exists(path):
+                  # Expected for firmware-ee02.bin while that build is
+                  # still allowed to fail (continue-on-error, see the
+                  # build step's own comment) -- publish whatever boards
+                  # did build rather than crashing the whole release over
+                  # a known, tracked gap.
+                  print(f"Skipping {name}: build did not produce {path}")
+                  continue
              if name in existing_assets:
                  del_status, _ = req("DELETE", f"/releases/{release_id}/assets/{existing_assets[name]}")
                  print(f"Removed existing asset {name} (status {del_status})")
@@ -68,5 +68,25 @@ jobs:
          chmod 600 ~/.ssh/deploy_key
          ssh-keyscan -p "$DEPLOY_PORT" "$DEPLOY_HOST" >> ~/.ssh/known_hosts 2>/dev/null
          ssh -i ~/.ssh/deploy_key -p "$DEPLOY_PORT" -o StrictHostKeyChecking=yes \
-            espressoframe_deployer@"$DEPLOY_HOST" \
-            'cd ~/espresso-frame && docker compose pull && docker compose up -d'
+            espressoframe_deployer@"$DEPLOY_HOST" bash -s <<'REMOTE'
+          set -e
+          cd ~/espresso-frame
+          docker compose down --remove-orphans
+          docker compose pull
+          # "down" returning doesn't guarantee the OS/docker-proxy has
+          # actually released port 8420 yet -- an immediate "up -d" right
+          # after (especially with "pull" a no-op because the image was
+          # already cached) can lose that race and fail with "port is
+          # already allocated", even though the exact same "up -d" run a
+          # few seconds later succeeds every time. Retry instead of
+          # guessing at a fixed sleep long enough to always cover it.
+          for i in $(seq 1 10); do
+            if docker compose up -d; then
+              exit 0
+            fi
+            echo "docker compose up -d failed (attempt $i/10) -- retrying in 3s"
+            sleep 3
+          done
+          echo "docker compose up -d did not succeed after 10 attempts"
+          exit 1
+          REMOTE
@@ -10,6 +10,9 @@ firmware/dependencies.lock
 firmware/build_xiao/
 firmware/sdkconfig.xiao_local
 firmware/sdkconfig.xiao_local.old
+firmware/build_ee02/
+firmware/sdkconfig.ee02_local
+firmware/sdkconfig.ee02_local.old

 # Python server
 server/__pycache__/
@@ -15,8 +15,7 @@ Start here, don't re-derive from scratch:
 - [`docs/architecture.md`](docs/architecture.md) -- how firmware and
  server talk (sequence diagram, boot flow).
 - [`docs/widgets.md`](docs/widgets.md) -- the server-side widget system
-  (data model, grid placement, compositor, button-action dispatch). Notes
-  a known gap at the bottom (legacy `Frame` columns not yet dropped).
+  (data model, grid placement, compositor, button-action dispatch).
 - [`docs/hardware.md`](docs/hardware.md) -- wiring.
 - [`server/README.md`](server/README.md), [`firmware/README.md`](firmware/README.md)
  -- per-component setup, config, and a lot of accumulated gotchas
@@ -1,9 +1,12 @@
 # ESPresso Frame

-A DIY e-ink photo frame: an ESP32-C6 pulls photos from your
-[Immich](https://immich.app) library and displays them on a 7.3" full-color
+A DIY e-ink photo frame: an ESP32 board pulls photos from your
+[Immich](https://immich.app) library and displays them on a full-color
 e-paper panel, waking on a timer to refresh and spending the rest of its
-time in deep sleep.
+time in deep sleep. The original build is a 7.3" panel on an ESP32-C6;
+a larger 13.3" panel on Seeed's EE02 (ESP32-S3) is supported
+server-side, but its firmware driver isn't working yet -- see
+[`docs/hardware.md`](docs/hardware.md).

 - **No cables to a computer, no SD card shuffling.** Provisioning is a
  captive portal with a QR code drawn on the panel itself -- scan, join,
@@ -12,7 +15,9 @@ time in deep sleep.
  all the work (pulling from Immich, cropping, dithering, packing into
  the panel's exact pixel format) and hands the device a stream it can
  write straight to SPI. The ESP32-C6 has no PSRAM and not much SRAM to
-  spare -- keeping it a dumb display client is what makes that workable.
+  spare -- keeping it a dumb display client is what makes that workable
+  (the same design carries over to the ESP32-S3 board even though it
+  does have PSRAM, for consistency).
 - **Crops toward faces, not just the center**, using face bounding boxes
  Immich already computed for its own People feature -- no bundled face
  detector.
@@ -21,8 +26,13 @@ time in deep sleep.

 ## Hardware

- ESP32-C6 dev board (8MB flash)
- [Waveshare 7.3" E Ink Spectra 6 (E6)](https://www.waveshare.com/7.3inch-e-paper-hat-e.htm) panel -- 800x480, 6-color, SPI
+- ESP32-C6 dev board (8MB flash), or Seeed's XIAO ESP32-C6 (production
+  board) -- both drive the panel below.
+- [Waveshare 7.3" E Ink Spectra 6 (E6)](https://www.waveshare.com/7.3inch-e-paper-hat-e.htm) panel -- 800x480, 6-color, SPI.
+- Experimental, not yet working: [Waveshare 13.3" E Ink Spectra 6](https://www.waveshare.com/13.3inch-e-paper-hat-plus-e.htm)
+  (1600x1200) on [Seeed's EE02](https://www.seeedstudio.com/XIAO-ePaper-DIY-Kit-EE02-for-13-3-Spectratm-6-E-Ink.html)
+  (ESP32-S3) -- server-side support exists, but the firmware driver's
+  panel init sequence isn't ported from vendor code yet.

 See [`docs/hardware.md`](docs/hardware.md) for wiring,
 [`docs/architecture.md`](docs/architecture.md) for how the two halves talk
@@ -34,14 +44,14 @@ placeable photos/calendar/whiteboard widget system.
 1. **[`server/`](server/)** -- run the FastAPI server first (Docker
   Compose, points at your Immich instance). See
   [`server/README.md`](server/README.md).
-2. **[`firmware/`](firmware/)** -- build and flash the ESP32-C6, then
+2. **[`firmware/`](firmware/)** -- build and flash the board, then
   scan the QR codes it draws on first boot to provision it. See
   [`firmware/README.md`](firmware/README.md).

 ## Repo layout

 ```
-firmware/   ESP-IDF project for the ESP32-C6
+firmware/   ESP-IDF project (ESP32-C6 devkit/xiao boards, ESP32-S3 ee02)
 server/     FastAPI server: Immich -> crop/dither/pack -> the frame
 docs/       Wiring and architecture notes
 ```
@@ -3,14 +3,15 @@
 Two independent pieces talk over HTTP or HTTPS (the server itself always
 speaks plain HTTP; HTTPS means a reverse proxy in front of it, see
 [`firmware/README.md`](../firmware/README.md#http-vs-https)) on the local
-network: the ESP32-C6 firmware, and a small FastAPI server that sits
-between it and Immich.
+network: the ESP32 firmware (ESP32-C6 for the devkit/xiao boards,
+ESP32-S3 for ee02 -- see [`docs/hardware.md`](hardware.md)), and a small
+FastAPI server that sits between it and Immich.

 ```mermaid
 sequenceDiagram
    participant Immich
    participant Server as ESPresso Frame Server
-    participant Frame as ESP32-C6 Frame
+    participant Frame as ESP32 Frame

    Note over Frame: First boot / never provisioned
    Frame->>Frame: Generate AP SSID/password, draw QR + config QR on panel
@@ -33,7 +34,7 @@ sequenceDiagram
    Server->>Immich: List album assets / download preview / faces<br/>(once per photo widget on the panel)
    Immich-->>Server: JPEG + face bounding boxes
    Server->>Server: Composite every widget's region onto one canvas,<br/>then enhance/overlay/quantize (dither)/pack 4bpp once
-    Server-->>Frame: 192,000 raw bytes, streamed
+    Server-->>Frame: packed 4bpp bytes, streamed<br/>(192,000 for the 7.3" panel; sized to whichever<br/>panel this frame's device reports, see Frame.panel_type)
    Frame->>Frame: Write to panel SPI buffer, compute CRC32
    alt CRC unchanged since last physical refresh
        Frame->>Frame: Skip refresh (nothing visually changed)
@@ -83,8 +84,9 @@ placement grid, and button-action dispatch.
     once).
   - Fetch the frame and write it into the panel's SPI buffer
     (`epd_write_frame()`), computing a CRC32 as it streams -- never
-     buffering the full ~192KB frame in RAM. The panel driver refuses to
-     write a short/wrong-size response into the buffer at all, so a
+     buffering the full packed frame in RAM (~192KB for the 7.3" panel;
+     proportionally more for the 13.3" panel). The panel driver refuses
+     to write a short/wrong-size response into the buffer at all, so a
     truncated fetch can't corrupt what's already there.
   - Compare the new CRC32 against the last one that was actually
     refreshed onto the panel (persisted in NVS). If it matches -- the
@@ -117,7 +119,9 @@ git history). Decoding a JPEG, then resizing/dithering/quantizing it to
 the panel's 6-color palette, would be expensive on-device in both memory
 and battery. Instead, the server does all of that with Pillow and hands
 the frame a pre-packed, ready-to-stream buffer -- the device never
-decodes an image at all.
+decodes an image at all. The ee02 board's ESP32-S3 does have PSRAM, but
+the same server-side design applies there too, for consistency and
+battery reasons rather than because the C6's memory limit forces it.

 ## Why face detection isn't run on-device (or even on the server)

@@ -152,3 +152,123 @@ photo. A full-color refresh on this panel takes 15-30+ seconds and draws
 more current than deep sleep by a wide margin -- expect battery life (if
 not running from USB power) to be dominated by refresh frequency, not
 sleep current.
+
+## Board identifiers
+
+Each board reports a name to the server (`X-Frame-Board`,
+`CONFIG_FRAME_BOARD_NAME`) that's chip-qualified rather than the plain
+`devkit`/`xiao` older firmware used -- `devkit_esp32c6`, `xiao_esp32c6`,
+`ee02` (see below). This changed once a second XIAO-based board (EE02,
+an ESP32-S3) existed and "xiao" alone stopped disambiguating hardware.
+The server keeps accepting the old bare names indefinitely, since
+already-flashed devices can't be retroactively renamed.
+
+## 13.3" Spectra 6 panel on Seeed's EE02 board (panel driver ported, `ee02` builds end-to-end; unverified on real hardware)
+
+A second panel size is supported server-side (the web UI shows a
+read-only "Panel: 13.3\" Spectra 6" once a frame's device reports
+itself as `ee02`), and **the panel driver itself is now real and
+compiles clean** -- `firmware/components/epd13in3e`'s init/LUT/refresh
+register sequence is a line-for-line port of Waveshare's own reference
+drivers for this exact panel+controller, confirmed identically across
+three independent vendor sources (Waveshare's RaspberryPi/c and ESP32
+drivers for this panel, plus Waveshare's own ESP-IDF example for their
+ESP32-S3-ePaper-13.3E6 driver board -- a different carrier than EE02,
+but the same panel/controller, hence the same command bytes). See that
+component's own top comment for details, and
+`server/app/image_pipeline.py`'s `PANEL_WIRE_TRANSPOSE` for a load-bearing
+correction that came with it: the panel's SPI wire raster is a *native
+1200x1600 (portrait)* raster, rotated 90 degrees from the panel's
+1600x1200 landscape mount/marketing size -- getting that backwards
+doesn't just rotate the image, it shreds it (1600x1200 and 1200x1600
+don't share a row stride).
+
+**A full `ee02` build now succeeds** (verified locally with a native,
+non-Docker ESP-IDF v6.0 install -- see
+`.claude/skills/build-firmware/SKILL.md`); `firmware/main/{back,next,combo}_button.c`
+used to call `esp_sleep_enable_gpio_wakeup_on_hp_periph_powerdown()`, an
+ESP32-C6-only deep-sleep GPIO-wakeup API (gated by
+`SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP`, which ESP32-S3's
+`soc_caps.h` doesn't define) with no ESP32-S3 fallback path. Each of the
+three button files now branches on that same capability macro: the
+ESP32-C6 path (devkit/xiao) is untouched, and a new ESP32-S3 path uses
+`esp_sleep_enable_ext1_wakeup_io()` (not the non-`_io()`
+`esp_sleep_enable_ext1_wakeup()`, which resets any previously-registered
+mask -- the `_io()` variant is additive, confirmed by reading
+`esp_hw_support/sleep_modes.c`, so the three button files can each keep
+registering their own GPIO independently, no combined-mask coordination
+needed) plus `esp_sleep_get_ext1_wakeup_status()` for the wake-cause
+check. The original C6 EXT1 attempt was rejected on hardware because
+its pull resistor didn't hold across the RTC_PERIPH power-down (see
+`firmware/main/next_button.c`'s `next_button_init()` comment) -- tracing
+the same code path for ESP32-S3 shows `gpio_config()`'s `pull_up_en`
+(already used by all three button files) delegates to
+`rtc_gpio_pullup_en()` for RTC-capable pins on every non-original-ESP32
+target (confirmed in `esp_driver_gpio/gpio.c`: `GPIO_RTCIO_ARE_INDEPENDENT`
+is 1 for both C6 and S3, meaning the digital and RTC pull registers are
+independent hardware and `gpio_config()` already sets the RTC one), so
+the pull-up should already survive the same power-down on ESP32-S3
+without any extra `rtc_gpio_*` calls. That reasoning is verified against
+IDF source, **not against real EE02 hardware** -- a clean compile
+confirms the code builds and links, not that it's actually
+spurious-wakeup-free on a real board. CI's
+`firmware-build-check.yml`/`firmware-release-build.yml`
+`continue-on-error` on this board's step is intentionally still in place
+until that hardware verification happens.
+
+Confirmed so far:
+
+- Panel: [Waveshare 13.3" e-Paper (E) Spectra 6](https://www.waveshare.com/13.3inch-e-paper-hat-plus-e.htm) --
+  1600x1200 mount size, 270.40x202.80mm, same 6-ink Spectra family as
+  the 7.3" panel (and, now vendor-confirmed, the identical 4-bit nibble
+  color codes). Full refresh ~19s. SPI wire raster is 1200x1600 (see
+  above).
+- Board: [Seeed's EE02](https://www.seeedstudio.com/XIAO-ePaper-DIY-Kit-EE02-for-13-3-Spectratm-6-E-Ink.html) --
+  a XIAO ESP32-S3 Plus (16MB flash, 8MB PSRAM) socketed into a dedicated
+  driver PCB, one reset + three user buttons, JST 2.0mm battery
+  connector with built-in charging IC.
+- Wiring (source: [github.com/rkaramandi/esphome-seeed-ee02](https://github.com/rkaramandi/esphome-seeed-ee02), a community integration, not Seeed's own schematic --
+  treat as a starting point, confirm before relying on it; Waveshare's
+  own ESP32-S3-ePaper-13.3E6 example uses different GPIO numbers, but
+  that's for Waveshare's own driver board, a different carrier than
+  EE02, so it doesn't apply here). Unlike epd7in3e's single chip-select,
+  this panel is driven as two halves sharing one CLK/MOSI/DC/RST/BUSY bus
+  with independent chip-selects -- now confirmed by the real driver code
+  too (master = left half, slave = right half of each row).
+
+  | Signal | GPIO | Kconfig option |
+  | --- | --- | --- |
+  | CLK | 7 | `EPD_PIN_CLK` |
+  | MOSI | 9 | `EPD_PIN_MOSI` |
+  | CS (master half) | 44 | `EPD_PIN_CS_MASTER` |
+  | CS (slave half) | 41 | `EPD_PIN_CS_SLAVE` |
+  | DC | 10 | `EPD_PIN_DC` |
+  | RST | 38 | `EPD_PIN_RST` |
+  | BUSY | 4 | `EPD_PIN_BUSY` |
+  | Panel power-enable | 43 | `EPD_PIN_POWER_EN` |
+
+  User buttons are reportedly at GPIO 2/3/5, but which physical button
+  maps to which logical role (next/back/menu) still isn't confirmed. The
+  firmware's button Kconfig options (`FRAME_NEXT_BUTTON_GPIO` etc.,
+  `firmware/main/Kconfig.projbuild`) now range to GPIO -1 to 21 under
+  `IDF_TARGET_ESP32S3` (the ESP32-S3's own ext1-wakeup-capable RTC-IO
+  range) instead of the ESP32-C6-shaped -1 to 7, so GPIO 2/3/5 fit
+  regardless -- but `firmware/sdkconfig.ee02` still deliberately doesn't
+  override the defaults inherited from the C6 boards (GPIO 2/0/1) until
+  the role mapping above is confirmed.
+
+  SPI clock is reportedly reliable only up to 2MHz on this
+  panel/board per the community ESPHome integration (vs. epd7in3e's 4MHz
+  default) -- see `firmware/sdkconfig.ee02`. Waveshare's own
+  ESP32-S3-ePaper-13.3E6 example defaults to 10MHz, but that's a
+  different carrier board, so it's a data point to try once real EE02
+  hardware exists, not a reason to bump the current conservative default
+  blind.
+
+Remaining unknowns before trusting this on real hardware: whether the
+ESP32-S3 button-wakeup path above actually avoids a spurious-instant-wakeup
+on a real board (not just compiles), the button-to-role mapping, the
+wiring table (community-sourced, not official), and
+`PANEL_WIRE_TRANSPOSE`'s rotation *direction* (`ROTATE_90` vs
+`ROTATE_270` -- a physical-assembly fact no vendor driver encodes, see
+that dict's own comment in `image_pipeline.py`).
@@ -6,10 +6,10 @@ weather/battery), like arranging icons on an Android home screen. A frame
 can hold several widgets of the same type (e.g. two photo widgets pointed
 at different Immich albums side by side).
 This replaced an earlier design where `Frame.mode` picked exactly one
-full-panel renderer; that column (and the other now-dead per-mode `Frame`
-columns it left behind -- `album_id`, `calendar_*`, `whiteboard_*`, etc.)
-is still physically present but unused, pending a final cleanup migration
-(see "Known gaps" below).
+full-panel renderer; that column and the other per-mode `Frame` columns
+it left behind (`album_id`, `calendar_*`, `whiteboard_*`, etc.) were
+dropped in migration 41, once every phase of the rollout had shipped
+(see "Known gaps" below for what's still open).

 The device-facing contract is unchanged by any of this: `GET /frame/image`,
 `POST /frame/advance`, `POST /frame/back` are the same frozen paths
@@ -42,6 +42,20 @@ a button press does.
  `api_widget_config_save`) since that endpoint's per-type dispatch is
  keyed on a config row via `widget_locked`, and border fields live on
  `Widget` itself, not any per-type config table.
+  Also carries `font_scale` (one of `panel_style.FONT_SCALE_CHOICES` --
+  `1.0`/`1.25`/`1.5`, labeled Normal/Large/X-Large), a per-widget
+  legibility control: calendar and tasks widgets pack in the most body
+  text at the smallest default sizes, so their gear-icon dialogs get a
+  "Text size" card (`_widget_font_scale_fields.html`) the other types
+  don't. Same Widget-level-property-not-config-field reasoning as
+  border, and its own `POST .../widgets/{id}/font-scale` endpoint for
+  the same reason. `panel_style.scaled_size(value, font_scale)` is the
+  one shared multiply-and-round point every classic (`calendar_render.py`)
+  and modern (`html_render.py`/`calendar_html_render.py`) size calc
+  routes through immediately after its own tier lookup/floor, so row
+  heights and per-view row caps (already derived from the font size, not
+  a fixed constant) automatically re-fit around the bigger text instead
+  of overflowing their box.
 - Per-type 1:1 extension tables -- `PhotoWidgetConfig`,
  `CalendarWidgetConfig`, `WhiteboardWidgetConfig`, `TaskWidgetConfig`,
  `StaticWidgetConfig`, `TextWidgetConfig`, `WeatherWidgetConfig`,
@@ -146,7 +160,217 @@ Calendar widgets pick from discrete size tiers (`calendar_render.py`'s
 `_SIZE_TIERS`) for font size/margins/row heights based on their actual
 grid footprint, rather than continuously scaling constants tuned for a
 full ~800x480 canvas -- falls back to agenda view if a widget is too small
-for month view to stay legible.
+for month view to stay legible. These tiers are pixel-size constants
+tuned against the 7.3" panel specifically; they aren't re-tuned or
+verified yet for the 13.3" panel's larger native resolution (see
+`docs/hardware.md`'s EE02 section) -- a widget's *grid footprint* (cell
+count) works the same on either panel, but its rendered legibility at
+that footprint's actual pixel size hasn't been checked on the bigger
+panel.
+
+### "Modern" render style (experimental)
+
+Every widget type except photos has a `render_style` column (`"classic"`
+default | `"modern"`) that swaps its hand-drawn PIL primitives for an
+HTML/CSS render: a Jinja2 template (`app/templates/widget_html/`) drawn
+through a persistent headless-Chromium browser (`app/html_render.py`,
+Playwright) instead of `ImageDraw` -- gradients, shadows, and soft icon
+shading PIL can't easily do. Calendar's own modern-style builders (all
+four view modes) live in `app/calendar_html_render.py` rather than
+`html_render.py` itself, mirroring `calendar_render.py`'s own separation
+from the simpler widget types.
+
+Every modern-style builder runs its own `ordered_dither` (Bayer/ordered,
+not Floyd-Steinberg) before returning, committing the widget to exact
+palette colors *before* compositing -- safe to mix with photo/other
+classic-rendered widgets on the same frame without a Floyd-Steinberg
+seam at the boundary, because ordered dithering has no cross-pixel error
+term the way Floyd-Steinberg's diffusion does (see `html_render.py`'s
+module docstring). No `Frame`-level dithering setting was needed to make
+this work.
+
+Not offered for the **photos** widget -- a real photograph isn't a
+synthesized dashboard card, and photos has a different concern instead:
+its own independent palette/dithering strength (`Frame.photo_palette_rgb`
+/ `photo_dither_strength`, a second "Photos configuration" card in
+Advanced Configuration, separate from the main `palette_rgb`/
+`dither_strength` every other widget uses). `widgets/photos.py`'s
+`render()` quantizes itself against these before returning, so a frame
+can tune the rest of its widgets' look (e.g. a calibrated palette for
+modern-style dashboard widgets) independently of what actually looks
+best for real photographs, with no `render_panel` changes needed --
+see that module's own docstring for the one small, accepted edge case
+(a border on a photos widget whose palette genuinely diverges from the
+frame's main one).
+
+Playwright/Chromium is a real, heavyweight runtime dependency imported
+lazily only when a widget actually uses modern style. Its browser binary
+is fetched by `start.sh` at container startup rather than baked into the
+image (see `server/Dockerfile`'s own comment) -- a single ~181MB
+`chrome-headless-shell` binary can't be split across Docker layers the
+way this project's pip/npm installs were, and confirmed-failed to push
+to the registry as a build-time layer; cached on the `/data` volume
+(`PLAYWRIGHT_BROWSERS_PATH`) so only the very first boot on a fresh
+volume actually downloads it. Still real-panel-unverified -- treat every
+"modern" style as experimental regardless of deploy status.
+
+Per-widget-type notes:
+
+- **weather**: `current`/`daily` modes only -- `hourly`/`multi_city`
+  always render classic regardless of this setting (see the Weather
+  widget section below).
+- **calendar**: all four view modes (agenda/today_tomorrow/week/month)
+  have a modern builder -- the only widget type with full modern-style
+  coverage from the start, rather than a partial rollout like weather's.
+  Month view's "falls back to agenda below a size threshold" behavior
+  (`_month_view_fits`) is honored identically in both styles.
+- **battery/text/tasks**: full coverage (both battery modes; text reuses
+  its own `_fit()` shrink-to-fit sizing logic, only the drawing differs).
+- **static image/whiteboard**: modern style is the *first* visual chrome
+  either widget type has ever had (classic draws the image with zero
+  frame/card at all) -- a rounded-corner, shadowed card
+  (`framed_image.html.jinja`, shared between the two) wrapping the
+  already-composed image. Left alone by the "bold minimal" pass below --
+  it never had the reskinned-classic problem the other widgets did.
+
+### "Bold minimal": a real redesign, not just a reskin
+
+The initial modern-style rollout (above) mostly translated each widget's
+*existing* classic layout into HTML/CSS -- same gradient header banner,
+same rounded-shadowed white card, prettier chrome around an unchanged
+composition. A second pass reworked weather (`current`/`daily`),
+calendar (all four views), tasks, and battery into an actual different
+visual language, picked from several divergent directions rendered
+through the real pipeline and reviewed with the maintainer (not chosen
+unilaterally -- see the "Reverted e-ink quantization attempt"-style
+caution about visual changes needing more than one look). Text and
+static/whiteboard were deliberately left as they were (see their notes
+just above) -- text already had zero chrome and its styling is
+user-authored content, not this system's to redesign; the framed-image
+card was already minimal.
+
+What changed, as a consistent language across every redesigned widget:
+
+- **No card.** No rounded-corner white box, no drop shadow, no outer
+  border -- content sits directly on the shared white canvas. `theme
+  ["radius"]`/`theme["shadow"]` are now unused by every redesigned
+  widget's builder (still resolved, for signature uniformity with
+  `resolve_theme`, but nothing reads them) -- a theme's radius/shadow
+  fields now only affect the *un*-redesigned modern widgets (static
+  image/whiteboard's `framed_image.html.jinja`).
+- **A slim accent rule instead of a gradient banner.** Every widget that
+  used to have a colored header bar with white text on it (weather's
+  `build_daily`, tasks, calendar's four views) now has a thin (~4-8px)
+  accent-colored rounded rule, with the header text as plain ink below
+  it instead of white text on top of it -- only that thin rule dithers
+  at the theme's richer `accent_amplitude` via `ordered_dither_regions`
+  now, not the header text sitting on it, which reads as a legibility
+  improvement, not just a visual one (see "Rich accent hues" below).
+- **A dominant hero value, not a centered icon+number of equal weight.**
+  Weather's `build_current` and battery's icon+percent used to be drawn
+  at roughly the same size, centered as a unit; both now put the numeric
+  value (temperature / battery percent) at a clearly dominant size, with
+  the icon small and secondary above it -- closer to a phone home-screen
+  widget than a dashboard tile.
+- **Padding/type sizes as a proportion of widget size, clamped to a
+  floor/ceiling, not a fixed pixel value.** So a 1-2 grid-cell widget
+  doesn't get comically large padding relative to its content, and a
+  near-full-panel widget doesn't get comically small padding either --
+  see `html_render._clamp` and every redesigned `build_*`'s own
+  `pad`/size calculations (`base = min(target_w, target_h)`, then a
+  fraction of `base` clamped to tuned floor/ceiling values).
+
+**A hairline color this palette can't actually render.** Auditing the
+month view's grid during this pass turned up a real, pre-existing bug
+carried forward unnoticed since the very first modern-style rollout:
+`.day-cell`/`.day-section`/`.col` divider borders used a pale gray
+(`#e2e6ec`) -- but `DEFAULT_PALETTE_RGB` has no gray in it at all (black/
+white/yellow/red/blue/green only), so a color that close to white always
+nearest-matches to pure white regardless of Bayer bias, at any amplitude
+-- confirmed by sampling actual rendered pixels, not just eyeballing a
+screenshot. The month grid's week-row dividers now use real solid black
+(`RULE`-equivalent, matching how the *classic* PIL renderer always drew
+them -- see `calendar_render.RULE`); the day-section/week-column dividers
+were simply dropped instead, since the accent rule + spacing at the
+start of the next section/column already read as a clear boundary
+without a line at all once you could actually render one.
+
+### Themes for modern-style widgets
+
+`Frame.theme` (String, default `"classic"`, one Advanced Configuration
+`<select>`) picks a curated visual preset for every modern-style widget
+on that frame -- font family, corner radius, drop shadow, and an accent
+hue for widgets with a header/accent region. Presets live in
+`app/theme_tokens.py`'s `THEMES` dict; `resolve_theme(theme_name,
+widget_kind, palette_rgb)` turns one into concrete, ready-to-render
+values (`accent_hex`/`accent_hex_dark`, resolved `font_regular`/
+`font_bold` file paths, `radius`, `shadow`, `accent_amplitude`). Inspired
+by [Tesserae](https://github.com/dmellok/tesserae)'s (AGPL-3.0) own
+three-layer CSS custom-property theme system -- this is an original
+reimplementation of that *architecture*, not a copy of its token file
+(see this repo's `CLAUDE.md` on copyleft dependencies).
+
+**What a theme actually changes, in practice**: the accent color (now a
+slim rule rather than a full header band -- see "Bold minimal" above) is
+still the most visible change on widgets that have one, but `font_family`
+applies to *every* text element in the widget, not just the header title
+-- day labels, temperatures, task rows, event times, day numbers all
+switch fonts too (e.g. "Moss" is serif, "Ochre" a slab serif), often
+more noticeable than the accent color on text-heavy widgets. `radius`/
+`shadow` only affect static image/whiteboard's card now (every other
+modern-style widget dropped its card in the "bold minimal" pass); text
+never used them (no card from the start) and weather/battery/tasks/
+calendar no longer have a card for them to apply to either.
+
+**A theme is purely stylistic, never functional color-coding.** Battery's
+charge-level red/yellow/green, calendar/tasks' per-owner event color
+chips, and text's user-authored inline run colors are status/identity
+signals, not style choices -- no theme may recolor them, and every
+`build_*`/`resolve_theme` call site that touches those stays on its own
+existing logic untouched. Text's own per-widget `font_family` setting
+(a user's explicit content-level choice, same carve-out reasoning) is
+similarly never overridden by a theme -- `build_text` accepts a
+`theme_name` param for signature uniformity with every other modern-
+style builder but deliberately ignores it.
+
+**Rich accent hues, not just the 6 exact panel inks.** A theme's
+`accent_hex` can be any arbitrary color (e.g. terracotta, moss, slate) --
+`html_render.ordered_dither_regions(rendered, palette_rgb,
+base_amplitude, accent_regions=[(rect, amplitude), ...])` dithers the
+whole widget at the existing safe default (`ordered_dither`'s tuned 48,
+unchanged, still icon/text-legible) and then *separately* re-dithers
+just the accent rectangle (a header bar's already-computed pixel rect)
+at a theme's higher `accent_amplitude` (~130) and pastes it back. Safe
+to do per-region for the same reason `ordered_dither` itself is safe
+per-widget: ordered (Bayer) dithering has no cross-pixel error term, so
+a region's result depends only on its own pixels. A single higher
+amplitude applied to the *whole* widget instead was tried and rejected --
+it washes out pale content (a weather icon's white cloud body nearly
+vanished in testing); confining the higher amplitude to just the accent
+rect avoids that while still letting the rect approximate a rich hue via
+denser stippling instead of flatly snapping to one nearest ink (what
+happens to a rich hue at the base amplitude).
+
+**"classic" is a deliberately no-visual-change default.** Its
+`accent_hex` is `None`, meaning "keep this widget kind's own pre-theme
+look exactly": weather's header was always a fixed blue gradient (now
+`theme_tokens._CLASSIC_WEATHER_GRADIENT`, byte-identical to the old
+module-level `ACCENT_START`/`ACCENT_END` constants this system
+replaced); tasks/calendar's header was always a flat single ink resolved
+through `panel_style.THEME` (still is, just via `resolve_theme` now).
+Widget kinds with no ink of their own (battery/text/static/whiteboard)
+fall back to black, though none of their templates currently have an
+accent-colored surface for it to visibly affect.
+
+Which widgets get the richer accent-region treatment: weather's
+`build_daily` (the slim rule, when `city_label` is set), tasks, and
+calendar's four view builders -- each computes its own small accent-rule
+pixel rect (a fixed-height band, not the old full header_h) and passes
+just that to `ordered_dither_regions`. Weather's `build_current` and
+battery have no accent surface at all (no header of any kind -- see
+"Bold minimal" above) and static/whiteboard's shared `build_framed_image`
+is unchanged from the original rollout; all three call plain
+`ordered_dither` with no accent region.

 ## Button actions

@@ -269,6 +493,11 @@ modes (`WeatherWidgetConfig.mode`, switchable in the widget's dialog like
  side -- the calendar widget's embedded strip, as a standalone
  widget's whole content instead of a strip above an agenda day.

+**Render style** (`WeatherWidgetConfig.render_style`, `"classic"` default
+| `"modern"`, experimental) -- see "Modern render style" above; weather's
+own modern coverage is `current`/`daily` only, `hourly`/`multi_city`
+always render classic regardless of this setting.
+
 `current`/`hourly`/`daily` share one configured location
 (`city_label`/`city_latitude`/`city_longitude`, set via `POST .../
 weather-location`, geocoded through `weather.geocode_city`); `multi_city`
@@ -340,20 +569,16 @@ piece of code with its own fixed small size, not shared with this
 widget, but drawing from the same thresholds/colors so a battery glyph
 reads the same wherever one shows up on a panel.

-## Known gaps (Phase 6, not yet done)
+## Known gaps

-The original 8-phase rollout plan's last phase is still open:
+The original 8-phase rollout plan's last phase is done: migration 41
+dropped the legacy per-mode `Frame` columns (`mode`, `album_id`,
+`current_asset_id`, all `calendar_*`, all `whiteboard_*`, `queue`, etc.)
+-- see its own docstring in `app/migration.py` for the raw-SQL backfill
+safety net that ran first, and `server/README.md` no longer describes
+photos/calendar/whiteboard as per-frame "modes".
+
+Still open:

- Legacy per-mode `Frame` columns (`mode`, `album_id`,
-  `current_asset_id`, all `calendar_*`, all `whiteboard_*`, etc.) are
-  still physically present in the schema but no longer read or written
-  anywhere -- they need a dedicated final migration to drop them. Left in
-  place deliberately through the widget-system rollout (a much larger
-  blast radius cutover than this project's usual same-migration-drop
-  convention) but there's no reason to keep carrying them now that every
-  phase has shipped.
- `server/README.md` still describes photos/calendar/whiteboard as
-  per-frame "modes" in several places rather than widgets -- needs a pass
-  once the column drop above is safely deployed.
 - Whiteboard rendering is tagged **(alpha)** in the UI -- not fully
  reliable yet, treat it as experimental if extending it.
@@ -1,6 +1,10 @@
 # ESPresso Frame Firmware

-ESP-IDF firmware for the ESP32-C6. On first boot it provisions itself over
+ESP-IDF firmware for the ESP32-C6 (devkit/xiao boards, 7.3" panel) or
+ESP32-S3 (ee02 board, 13.3" panel -- see
+[Building for Seeed's EE02](#building-for-seeeds-ee02-esp32-s3--133-panel-driver-ported-ee02-builds-end-to-end-unverified-on-real-hardware)
+below; it builds end-to-end now, but is still unverified on real EE02
+hardware). On first boot it provisions itself over
 a WiFi captive portal; after that it wakes on a timer, fetches an
 already-processed frame from the [server](../server/), streams it straight
 to the panel over SPI, and goes back to deep sleep.
@@ -48,6 +52,40 @@ never clobbers the other:
 (`./build_for_board.sh devkit ...` does the same for the dev board --
 equivalent to a plain `idf.py`, just consistent with the XIAO invocation.)

+### Building for Seeed's EE02 (ESP32-S3 + 13.3" panel, driver ported; `ee02` builds end-to-end, unverified on real hardware)
+
+EE02 is a different chip (ESP32-S3, not C6), so it needs `set-target
+esp32s3` instead of `esp32c6`, and its own partition table/flash-size
+Kconfig sized for its 16MB flash
+([`partitions_ee02.csv`](partitions_ee02.csv)):
+
+```
+./build_for_board.sh ee02 set-target esp32s3
+./build_for_board.sh ee02 build
+```
+
+**This now compiles and links clean end-to-end**, verified locally with
+a native, non-Docker ESP-IDF v6.0 install (see
+`.claude/skills/build-firmware/SKILL.md`).
+`firmware/components/epd13in3e`'s panel init/LUT/refresh register
+sequence is a real, vendor-confirmed port (see that component's own top
+comment and
+[`docs/hardware.md`](../docs/hardware.md#133-spectra-6-panel-on-seeeds-ee02-board-panel-driver-ported-ee02-builds-end-to-end-unverified-on-real-hardware)
+for the vendor sources and the load-bearing native-raster-orientation
+correction that came with it). `main/{back,next,combo}_button.c` used to
+call an ESP32-C6-only deep-sleep GPIO-wakeup API with no ESP32-S3
+fallback; each now branches on `SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP`
+to keep the ESP32-C6 path (devkit/xiao) untouched while using
+`esp_sleep_enable_ext1_wakeup_io()` on ESP32-S3 -- see `docs/hardware.md`'s
+same section for why the additive `_io()` variant needs no combined-mask
+coordination across the three button files, and why the pull-resistor
+concern that ruled out EXT1 wakeup on ESP32-C6 doesn't apply the same
+way here. That reasoning is confirmed against ESP-IDF source, **not
+against real EE02 hardware** -- CI's
+(`.gitea/workflows/firmware-build-check.yml`/`firmware-release-build.yml`)
+`continue-on-error` on this board's step is intentionally still in place
+until it is.
+
 ## Configuration (`idf.py menuconfig`)

 Under **ESPresso Frame Configuration**:
@@ -147,10 +185,9 @@ two-step setup screen:
   portal's config page (`http://192.168.4.1/` by default), for a
   one-scan shortcut once you've joined the AP.

-The config page asks for your home WiFi SSID/password, the "Tools
+The config page asks for your home WiFi SSID/password and the "Tools
 Server" address (`host:port` of the [server](../server/) -- **not** your
-Immich server; see below for the `https://` form), and an optional
-"Access Token" (see below -- usually blank). Saving hands your browser
+Immich server; see below for the `https://` form). Saving hands your browser
 off to the server's claim page (after ~7 seconds, giving your phone
 time to rejoin its normal WiFi while the device reboots) so the frame
 gets linked to your account; the device meanwhile connects to your home
@@ -212,19 +249,6 @@ certificate was actually issued for -- a bare LAN IP address
 (`https://192.168.1.50`) will fail the handshake even against a
 perfectly valid cert for a different name.

-## Access token
-
-Usually blank. Current servers issue each frame its own private token
-automatically on first contact (delivered via `GET /frame/config`,
-persisted in NVS, preferred by `build_url()` from then on -- and baked
-into the manage-menu/share QR codes so scanning them just works). The
-captive portal's "Access Token" field only matters when pointing this
-firmware at an *older* (pre-multi-frame) server whose `MANAGEMENT_TOKEN`
-is set: paste that shared value and the device sends it (`?token=...`)
-until a newer server replaces it with a per-frame one. Re-provisioning
-clears any stored per-frame token -- a fresh identity handshake with
-whatever server you point it at next.
-
 ## Skipping to the next photo

 Wire a momentary push button between GPIO2 and GND (internal pull-up,
@@ -1,28 +1,42 @@
 #!/usr/bin/env bash
-# Builds/flashes for a specific board variant. This project targets two:
+# Builds/flashes for a specific board variant. This project targets three:
 #
 #   devkit  ESP32-C6-DevKitC-1 (8MB flash) -- the dev board. This is
 #           also the plain `idf.py` default (sdkconfig/build/), so this
 #           script's devkit mode is mostly for symmetry -- normal
-#           `idf.py build`/`flash` work fine too.
+#           `idf.py build`/`flash` work fine too. Reports itself as
+#           "devkit_esp32c6" (see main/Kconfig.projbuild).
 #   xiao    Seeed XIAO ESP32-C6 (4MB flash) -- the production board.
+#           Reports itself as "xiao_esp32c6".
+#   ee02    Seeed EE02 (XIAO ESP32-S3 Plus, 16MB flash) + 13.3" Spectra 6
+#           panel -- a genuinely different chip target (esp32s3, not
+#           esp32c6), unlike xiao's same-chip Kconfig-only variant.
+#           Reports itself as "ee02". NOTE: the epd13in3e driver this
+#           board links (firmware/components/epd13in3e) doesn't actually
+#           work yet -- its panel init/LUT/refresh register sequence is
+#           still unported from vendor demo code (see that component's
+#           own top-of-file comment); building for ee02 will fail to
+#           compile until that lands, by design (a deliberate #error, not
+#           a bug in this script).
 #
-# The two need different partition tables (the XIAO's 4MB doesn't fit
-# the dev board's two 2MB OTA app slots -- see partitions_xiao.csv,
-# 1.875MB slots instead) and a different flash-size Kconfig. Rather
-# than hand-editing the shared sdkconfig back and forth (fragile, easy
-# to leave it in the wrong state for whichever board you flash next),
-# each board gets its own build directory and its own generated
-# sdkconfig, seeded from sdkconfig.defaults (shared) with the board's
-# override file layered on top via ESP-IDF's own SDKCONFIG_DEFAULTS
-# mechanism. Switching boards is just switching which one you invoke --
-# neither ever touches the other's config or build output.
+# The three need different partition tables (each flash size needs its
+# own OTA app-slot sizing -- see partitions_xiao.csv/partitions_ee02.csv)
+# and different flash-size Kconfig. Rather than hand-editing the shared
+# sdkconfig back and forth (fragile, easy to leave it in the wrong state
+# for whichever board you flash next), each board gets its own build
+# directory and its own generated sdkconfig, seeded from
+# sdkconfig.defaults (shared) with the board's override file layered on
+# top via ESP-IDF's own SDKCONFIG_DEFAULTS mechanism. Switching boards is
+# just switching which one you invoke -- none ever touches another's
+# config or build output.
 #
 # Usage:
 #   ./build_for_board.sh xiao build
 #   ./build_for_board.sh xiao flash -p /dev/ttyUSB0
 #   ./build_for_board.sh xiao flash monitor -p /dev/ttyUSB0
 #   ./build_for_board.sh devkit build
+#   ./build_for_board.sh ee02 set-target esp32s3   # first build only, see below
+#   ./build_for_board.sh ee02 build
 #
 # Defaults to "build" if no idf.py subcommand is given.

@@ -32,7 +46,7 @@ script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 cd "$script_dir"

 if [ $# -lt 1 ]; then
-    echo "Usage: $0 <devkit|xiao> [idf.py args...]" >&2
+    echo "Usage: $0 <devkit|xiao|ee02> [idf.py args...]" >&2
    exit 1
 fi
 board="$1"
@@ -49,8 +63,13 @@ case "$board" in
        sdkconfig_path="$script_dir/sdkconfig"
        defaults="$script_dir/sdkconfig.defaults"
        ;;
+    ee02)
+        build_dir="$script_dir/build_ee02"
+        sdkconfig_path="$script_dir/sdkconfig.ee02_local"
+        defaults="$script_dir/sdkconfig.defaults;$script_dir/sdkconfig.ee02"
+        ;;
    *)
-        echo "Unknown board '$board' -- expected 'devkit' or 'xiao'" >&2
+        echo "Unknown board '$board' -- expected 'devkit', 'xiao', or 'ee02'" >&2
        exit 1
        ;;
 esac
@@ -0,0 +1,13 @@
+# SRCS is conditional on which board's panel this build targets -- see
+# epd7in3e/CMakeLists.txt's identical comment (the two components mirror
+# each other: exactly one contributes actual object files/symbols to any
+# given build, the other is required but empty).
+if(CONFIG_FRAME_PANEL_EE02_13IN3)
+    set(srcs "epd13in3e.c")
+else()
+    set(srcs "")
+endif()
+
+idf_component_register(SRCS ${srcs}
+                       INCLUDE_DIRS "include"
+                       PRIV_REQUIRES esp_driver_spi esp_driver_gpio)
@@ -0,0 +1,65 @@
+menu "E-Paper Display (epd13in3e) Configuration"
+
+    config EPD_PIN_CLK
+        int "SPI CLK (SCLK) GPIO"
+        default 7
+        help
+            Defaults sourced from a community-verified ESPHome
+            integration for this exact board
+            (github.com/rkaramandi/esphome-seeed-ee02) -- NOT an
+            official Waveshare/Seeed reference driver (see
+            firmware/components/epd13in3e/epd13in3e.c's top comment,
+            which is about the still-unknown panel init/LUT/refresh
+            register sequence, a separate and larger unknown than this
+            pinout). Override if your own board wiring differs.
+
+    config EPD_PIN_MOSI
+        int "SPI MOSI (DIN) GPIO"
+        default 9
+
+    config EPD_PIN_CS_MASTER
+        int "SPI CS (master half) GPIO"
+        default 44
+        help
+            Unlike epd7in3e's single-CS interface, this panel is driven
+            as two halves over one shared CLK/MOSI/DC/RST/BUSY bus with
+            two independent chip-selects (master/slave) -- confirmed by
+            the same community ESPHome integration, not yet by this
+            component's own driver code (still unimplemented, see
+            epd13in3e.c).
+
+    config EPD_PIN_CS_SLAVE
+        int "SPI CS (slave half) GPIO"
+        default 41
+
+    config EPD_PIN_DC
+        int "Data/Command GPIO"
+        default 10
+
+    config EPD_PIN_RST
+        int "Reset GPIO"
+        default 38
+
+    config EPD_PIN_BUSY
+        int "Busy GPIO"
+        default 4
+
+    config EPD_PIN_POWER_EN
+        int "Panel power-enable GPIO"
+        default 43
+        help
+            No equivalent pin on epd7in3e's board -- the EE02 apparently
+            gates the panel's own power rail separately from the ESP32-S3
+            module's. Source: same community integration as the other
+            pins above.
+
+    config EPD_SPI_CLOCK_HZ
+        int "SPI clock speed (Hz)"
+        default 2000000
+        help
+            2MHz, not epd7in3e's 4MHz default -- the same community
+            integration notes higher rates were unreliable on this
+            panel/board combo. Revisit once wiring is confirmed on real
+            hardware.
+
+endmenu
@@ -0,0 +1,438 @@
+#include <string.h>
+
+#include "driver/gpio.h"
+#include "driver/spi_master.h"
+#include "esp_heap_caps.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "esp_check.h"
+#include "esp_log.h"
+#include "esp_rom_crc.h"
+
+#include "epd13in3e.h"
+
+/* Command bytes/register values below are a line-for-line transcription of
+ * Waveshare's official reference drivers for this exact panel+controller --
+ * confirmed identical across three independent sources (RaspberryPi/c,
+ * ESP32, and the ESP32-S3-ePaper-13.3E6 ESP-IDF example; see this
+ * component's header for repo paths). Same "don't clean these up" rule as
+ * epd7in3e.c: this class of panel controller has no public datasheet, so
+ * the vendor driver is the source of truth for every byte.
+ *
+ * Unlike epd7in3e's single chip-select, this panel is driven as two
+ * independent controllers sharing one CLK/MOSI/DC/RST/BUSY bus but with
+ * separate chip-selects (EPD_PIN_CS_MASTER/EPD_PIN_CS_SLAVE) -- most init
+ * commands broadcast to both (CS_ALL), a handful of power/boost commands
+ * go only to the master (which owns the shared analog rails), and actual
+ * frame data is split per-row into a left half (master) and right half
+ * (slave), 300 bytes each out of each 600-byte row. That split is why
+ * epd_write_frame below buffers the whole frame in PSRAM before sending
+ * anything (every row needs slicing in half before either half can go out),
+ * unlike epd7in3e.c's straight single-CS passthrough streaming.
+ *
+ * Pin numbers themselves are NOT from this vendor code -- Waveshare's
+ * ESP32-S3-ePaper-13.3E6 example targets Waveshare's own driver board, a
+ * different carrier than Seeed's EE02 this project actually uses, so its
+ * GPIO numbers don't apply here. EE02's pins remain sourced from a
+ * community-verified ESPHome integration (see this component's Kconfig),
+ * not an official reference. */
+
+#define EPD_SPI_HOST SPI2_HOST
+#define EPD_SPI_CHUNK_SIZE 4096
+
+static const char *TAG = "epd13in3e";
+
+#define EPD_CHECK(expr) ESP_RETURN_ON_ERROR((expr), TAG, #expr)
+
+/* --- panel command opcodes --- */
+#define PSR             0x00
+#define PWR             0x01
+#define POF             0x02
+#define PON             0x04
+#define BTST_N          0x05
+#define BTST_P          0x06
+#define DTM             0x10 /* data transfer (frame data) */
+#define DRF             0x12 /* display refresh */
+#define CDI             0x50
+#define TCON            0x60
+#define TRES            0x61
+#define AN_TM           0x74
+#define AGID            0x86
+#define BUCK_BOOST_VDDN 0xB0
+#define TFT_VCOM_POWER  0xB1
+#define EN_BUF          0xB6
+#define BOOST_VDDP_EN   0xB7
+#define CCSET           0xE0
+#define PWS             0xE3
+#define CMD66           0xF0
+#define DEEP_SLEEP      0x07
+
+/* --- canned init parameter blobs (do NOT edit -- see top comment) --- */
+static const uint8_t PSR_V[]             = {0xDF, 0x69};
+static const uint8_t PWR_V[]             = {0x0F, 0x00, 0x28, 0x2C, 0x28, 0x38};
+static const uint8_t POF_V[]             = {0x00};
+static const uint8_t DRF_V[]             = {0x00};
+static const uint8_t CDI_V[]             = {0xF7};
+static const uint8_t TCON_V[]            = {0x03, 0x03};
+static const uint8_t TRES_V[]            = {0x04, 0xB0, 0x03, 0x20};
+static const uint8_t CMD66_V[]           = {0x49, 0x55, 0x13, 0x5D, 0x05, 0x10};
+static const uint8_t EN_BUF_V[]          = {0x07};
+static const uint8_t CCSET_V[]           = {0x01};
+static const uint8_t PWS_V[]             = {0x22};
+static const uint8_t AN_TM_V[]           = {0xC0, 0x1C, 0x1C, 0xCC, 0xCC, 0xCC, 0x15, 0x15, 0x55};
+static const uint8_t AGID_V[]            = {0x10};
+static const uint8_t BTST_P_V[]          = {0xE8, 0x28};
+static const uint8_t BOOST_VDDP_EN_V[]   = {0x01};
+static const uint8_t BTST_N_V[]          = {0xE8, 0x28};
+static const uint8_t BUCK_BOOST_VDDN_V[] = {0x01};
+static const uint8_t TFT_VCOM_POWER_V[]  = {0x02};
+
+static spi_device_handle_t s_spi;
+
+static void epd_delay_ms(uint32_t ms)
+{
+    vTaskDelay(pdMS_TO_TICKS(ms));
+}
+
+/* BUSY: LOW = busy, HIGH = idle -- same polarity/poll-interval reasoning
+ * as epd7in3e.c's identical comment (a tight 1ms-rounds-to-0-ticks poll
+ * starves the idle task badly enough to trip the watchdog). */
+static void epd_wait_busy(void)
+{
+    while (gpio_get_level((gpio_num_t)CONFIG_EPD_PIN_BUSY) == 0) {
+        epd_delay_ms(20);
+    }
+}
+
+static esp_err_t epd_spi_write(const uint8_t *data, size_t len)
+{
+    while (len > 0) {
+        size_t n = len > EPD_SPI_CHUNK_SIZE ? EPD_SPI_CHUNK_SIZE : len;
+        spi_transaction_t t = {
+            .length = n * 8,
+            .tx_buffer = data,
+        };
+        EPD_CHECK(spi_device_polling_transmit(s_spi, &t));
+        data += n;
+        len -= n;
+    }
+    return ESP_OK;
+}
+
+/* Unlike epd7in3e.c's send_command/send_data, these do NOT touch CS --
+ * this panel's two independent chip-selects (and the "broadcast to both"
+ * vs "master only" split the init sequence needs) mean CS bracketing has
+ * to be the caller's decision, not baked into the byte-send primitive. */
+static esp_err_t epd_send_command(uint8_t cmd)
+{
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_DC, 0);
+    return epd_spi_write(&cmd, 1);
+}
+
+static esp_err_t epd_send_data(const uint8_t *data, size_t len)
+{
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_DC, 1);
+    return epd_spi_write(data, len);
+}
+
+static esp_err_t epd_send_data_byte(uint8_t data)
+{
+    return epd_send_data(&data, 1);
+}
+
+static void epd_cs_both(int level)
+{
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_CS_MASTER, level);
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_CS_SLAVE, level);
+}
+
+/* Sends `cmd` + its data blob to both controllers at once (most of the
+ * init sequence -- shared display-timing/power registers). */
+static esp_err_t epd_cmd_both(uint8_t cmd, const uint8_t *data, size_t len)
+{
+    epd_cs_both(0);
+    esp_err_t err = epd_send_command(cmd);
+    if (err == ESP_OK && data != NULL) {
+        err = epd_send_data(data, len);
+    }
+    epd_cs_both(1);
+    return err;
+}
+
+/* Sends `cmd` + its data blob to the master controller only -- the boost/
+ * VCOM power registers the master alone owns. */
+static esp_err_t epd_cmd_master(uint8_t cmd, const uint8_t *data, size_t len)
+{
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_CS_MASTER, 0);
+    esp_err_t err = epd_send_command(cmd);
+    if (err == ESP_OK && data != NULL) {
+        err = epd_send_data(data, len);
+    }
+    epd_cs_both(1);
+    return err;
+}
+
+/* 5-edge reset sequence (30ms each) -- per-vendor-source exact, more edges
+ * than epd7in3e.c's 3-edge/20ms reset. */
+static void epd_reset(void)
+{
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_RST, 1);
+    epd_delay_ms(30);
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_RST, 0);
+    epd_delay_ms(30);
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_RST, 1);
+    epd_delay_ms(30);
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_RST, 0);
+    epd_delay_ms(30);
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_RST, 1);
+    epd_delay_ms(30);
+}
+
+/* Power on, refresh, power off -- mirrors EPD_TurnOnDisplay()/
+ * EPD_13IN3E_TurnOnDisplay() in the reference drivers. */
+esp_err_t epd_turn_on_display(void)
+{
+    EPD_CHECK(epd_cmd_both(PON, NULL, 0));
+    epd_wait_busy();
+
+    epd_delay_ms(50);
+    EPD_CHECK(epd_cmd_both(DRF, DRF_V, sizeof(DRF_V)));
+    epd_wait_busy();
+
+    epd_delay_ms(50);
+    EPD_CHECK(epd_cmd_both(POF, POF_V, sizeof(POF_V)));
+    /* No busy-wait after POF -- matches every reference driver. */
+
+    return ESP_OK;
+}
+
+esp_err_t epd_init(void)
+{
+    gpio_config_t out_cfg = {
+        .pin_bit_mask = (1ULL << CONFIG_EPD_PIN_DC) | (1ULL << CONFIG_EPD_PIN_RST) |
+                        (1ULL << CONFIG_EPD_PIN_CS_MASTER) | (1ULL << CONFIG_EPD_PIN_CS_SLAVE) |
+                        (1ULL << CONFIG_EPD_PIN_POWER_EN),
+        .mode = GPIO_MODE_OUTPUT,
+    };
+    EPD_CHECK(gpio_config(&out_cfg));
+
+    gpio_config_t busy_cfg = {
+        .pin_bit_mask = (1ULL << CONFIG_EPD_PIN_BUSY),
+        .mode = GPIO_MODE_INPUT,
+    };
+    EPD_CHECK(gpio_config(&busy_cfg));
+
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_RST, 1);
+    epd_cs_both(1);
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_POWER_EN, 0);
+
+    spi_bus_config_t bus_cfg = {
+        .mosi_io_num = CONFIG_EPD_PIN_MOSI,
+        .miso_io_num = -1,
+        .sclk_io_num = CONFIG_EPD_PIN_CLK,
+        .quadwp_io_num = -1,
+        .quadhd_io_num = -1,
+        .max_transfer_sz = EPD_SPI_CHUNK_SIZE,
+    };
+    EPD_CHECK(spi_bus_initialize(EPD_SPI_HOST, &bus_cfg, SPI_DMA_CH_AUTO));
+
+    spi_device_interface_config_t dev_cfg = {
+        .clock_speed_hz = CONFIG_EPD_SPI_CLOCK_HZ,
+        .mode = 0,
+        .spics_io_num = -1, /* both chip-selects are bit-banged by hand above */
+        .queue_size = 1,
+    };
+    EPD_CHECK(spi_bus_add_device(EPD_SPI_HOST, &dev_cfg, &s_spi));
+
+    /* Panel power-enable rail (no equivalent on epd7in3e's board -- EE02
+     * gates it separately from the ESP32-S3 module's own supply). */
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_POWER_EN, 1);
+    epd_delay_ms(10);
+
+    epd_reset();
+    epd_wait_busy();
+
+    /* Master-only: shared analog-timing register. */
+    EPD_CHECK(epd_cmd_master(AN_TM, AN_TM_V, sizeof(AN_TM_V)));
+
+    /* Broadcast: display-timing/power-sequencing registers both
+     * controllers need identically. */
+    EPD_CHECK(epd_cmd_both(CMD66, CMD66_V, sizeof(CMD66_V)));
+    EPD_CHECK(epd_cmd_both(PSR,   PSR_V,   sizeof(PSR_V)));
+    EPD_CHECK(epd_cmd_both(CDI,   CDI_V,   sizeof(CDI_V)));
+    EPD_CHECK(epd_cmd_both(TCON,  TCON_V,  sizeof(TCON_V)));
+    EPD_CHECK(epd_cmd_both(AGID,  AGID_V,  sizeof(AGID_V)));
+    EPD_CHECK(epd_cmd_both(PWS,   PWS_V,   sizeof(PWS_V)));
+    EPD_CHECK(epd_cmd_both(CCSET, CCSET_V, sizeof(CCSET_V)));
+    EPD_CHECK(epd_cmd_both(TRES,  TRES_V,  sizeof(TRES_V)));
+
+    /* Master-only: boost/VCOM power programming. */
+    EPD_CHECK(epd_cmd_master(PWR,             PWR_V,             sizeof(PWR_V)));
+    EPD_CHECK(epd_cmd_master(EN_BUF,          EN_BUF_V,          sizeof(EN_BUF_V)));
+    EPD_CHECK(epd_cmd_master(BTST_P,          BTST_P_V,          sizeof(BTST_P_V)));
+    EPD_CHECK(epd_cmd_master(BOOST_VDDP_EN,   BOOST_VDDP_EN_V,   sizeof(BOOST_VDDP_EN_V)));
+    EPD_CHECK(epd_cmd_master(BTST_N,          BTST_N_V,          sizeof(BTST_N_V)));
+    EPD_CHECK(epd_cmd_master(BUCK_BOOST_VDDN, BUCK_BOOST_VDDN_V, sizeof(BUCK_BOOST_VDDN_V)));
+    EPD_CHECK(epd_cmd_master(TFT_VCOM_POWER,  TFT_VCOM_POWER_V,  sizeof(TFT_VCOM_POWER_V)));
+
+    ESP_LOGI(TAG, "EPD initialized (CLK=%d MOSI=%d CS_M=%d CS_S=%d DC=%d RST=%d BUSY=%d PWR_EN=%d)",
+             CONFIG_EPD_PIN_CLK, CONFIG_EPD_PIN_MOSI, CONFIG_EPD_PIN_CS_MASTER,
+             CONFIG_EPD_PIN_CS_SLAVE, CONFIG_EPD_PIN_DC, CONFIG_EPD_PIN_RST,
+             CONFIG_EPD_PIN_BUSY, CONFIG_EPD_PIN_POWER_EN);
+
+    return ESP_OK;
+}
+
+esp_err_t epd_write_frame(epd_read_fn_t read_fn, void *ctx, uint32_t *out_crc32)
+{
+    ESP_RETURN_ON_FALSE(read_fn != NULL, ESP_ERR_INVALID_ARG, TAG, "read_fn required");
+
+    /* Every row has to be sliced into a left (master) and right (slave)
+     * half before either half can go out over SPI, so -- unlike
+     * epd7in3e.c's single-CS passthrough -- bytes can't be forwarded to
+     * the wire as they arrive. Buffer the whole ~938KB frame in PSRAM
+     * first (EE02's XIAO ESP32-S3 Plus has 8MB of it). */
+    uint8_t *frame = heap_caps_malloc(EPD_FRAME_BYTES, MALLOC_CAP_SPIRAM);
+    if (frame == NULL) {
+        ESP_LOGE(TAG, "OOM allocating %u-byte frame buffer", (unsigned)EPD_FRAME_BYTES);
+        return ESP_ERR_NO_MEM;
+    }
+
+    size_t total = 0;
+    uint32_t crc = 0;
+    size_t n;
+    while (total < EPD_FRAME_BYTES &&
+           (n = read_fn(frame + total, EPD_FRAME_BYTES - total, ctx)) > 0) {
+        crc = esp_rom_crc32_le(crc, frame + total, n);
+        total += n;
+    }
+
+    if (total != EPD_FRAME_BYTES) {
+        /* Same invariant as epd7in3e.c: never touch the panel on a
+         * short/wrong-size stream -- the visible screen is left exactly
+         * as it was. */
+        ESP_LOGE(TAG, "Stream supplied %u bytes, expected %u -- aborting refresh",
+                 (unsigned)total, (unsigned)EPD_FRAME_BYTES);
+        free(frame);
+        return ESP_ERR_INVALID_SIZE;
+    }
+
+    /* De-interleave into one half-buffer at a time and DMA it out as a
+     * single contiguous transfer (chunked internally by epd_spi_write) --
+     * far fewer, far larger SPI transactions than sending 1600 separate
+     * 300-byte rows per side. */
+    const size_t HALF_ROW = EPD_BYTES_PER_ROW / 2; /* 300 */
+    const size_t HALF_BUF = HALF_ROW * EPD_HEIGHT; /* 480000 */
+    uint8_t *half = heap_caps_malloc(HALF_BUF, MALLOC_CAP_SPIRAM);
+    if (half == NULL) {
+        ESP_LOGE(TAG, "OOM allocating %u-byte half-frame scratch buffer", (unsigned)HALF_BUF);
+        free(frame);
+        return ESP_ERR_NO_MEM;
+    }
+
+    for (size_t r = 0; r < EPD_HEIGHT; r++) {
+        memcpy(half + r * HALF_ROW, frame + r * EPD_BYTES_PER_ROW, HALF_ROW);
+    }
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_CS_MASTER, 0);
+    esp_err_t err = epd_send_command(DTM);
+    if (err == ESP_OK) {
+        err = epd_send_data(half, HALF_BUF);
+    }
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_CS_MASTER, 1);
+
+    if (err == ESP_OK) {
+        for (size_t r = 0; r < EPD_HEIGHT; r++) {
+            memcpy(half + r * HALF_ROW, frame + r * EPD_BYTES_PER_ROW + HALF_ROW, HALF_ROW);
+        }
+        gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_CS_SLAVE, 0);
+        err = epd_send_command(DTM);
+        if (err == ESP_OK) {
+            err = epd_send_data(half, HALF_BUF);
+        }
+        gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_CS_SLAVE, 1);
+    }
+
+    free(half);
+    free(frame);
+    EPD_CHECK(err);
+
+    if (out_crc32 != NULL) {
+        *out_crc32 = crc;
+    }
+
+    return ESP_OK;
+}
+
+esp_err_t epd_display_stream(epd_read_fn_t read_fn, void *ctx)
+{
+    esp_err_t err = epd_write_frame(read_fn, ctx, NULL);
+    if (err != ESP_OK) {
+        return err;
+    }
+    return epd_turn_on_display();
+}
+
+typedef struct {
+    const uint8_t *data;
+    size_t len;
+    size_t pos;
+} epd_buf_ctx_t;
+
+static size_t epd_buf_read(uint8_t *chunk, size_t chunk_size, void *ctx_)
+{
+    epd_buf_ctx_t *c = (epd_buf_ctx_t *)ctx_;
+    size_t remaining = c->len - c->pos;
+    size_t n = remaining < chunk_size ? remaining : chunk_size;
+    if (n == 0) {
+        return 0;
+    }
+    memcpy(chunk, c->data + c->pos, n);
+    c->pos += n;
+    return n;
+}
+
+esp_err_t epd_display_buffer(const uint8_t *frame, size_t len)
+{
+    epd_buf_ctx_t buf_ctx = { .data = frame, .len = len, .pos = 0 };
+    return epd_display_stream(epd_buf_read, &buf_ctx);
+}
+
+typedef struct {
+    uint8_t fill_byte;
+    size_t remaining;
+} epd_fill_ctx_t;
+
+static size_t epd_fill_read(uint8_t *chunk, size_t chunk_size, void *ctx_)
+{
+    epd_fill_ctx_t *c = (epd_fill_ctx_t *)ctx_;
+    size_t n = c->remaining < chunk_size ? c->remaining : chunk_size;
+    if (n == 0) {
+        return 0;
+    }
+    memset(chunk, c->fill_byte, n);
+    c->remaining -= n;
+    return n;
+}
+
+esp_err_t epd_clear(epd_color_t color)
+{
+    epd_fill_ctx_t fill_ctx = {
+        .fill_byte = (uint8_t)((color << 4) | color),
+        .remaining = EPD_FRAME_BYTES,
+    };
+    return epd_display_stream(epd_fill_read, &fill_ctx);
+}
+
+esp_err_t epd_sleep(void)
+{
+    epd_cs_both(0);
+    EPD_CHECK(epd_send_command(DEEP_SLEEP));
+    EPD_CHECK(epd_send_data_byte(0xA5)); /* magic deep-sleep arg per every reference driver */
+    epd_cs_both(1);
+
+    epd_delay_ms(100);
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_POWER_EN, 0);
+    gpio_set_level((gpio_num_t)CONFIG_EPD_PIN_RST, 0);
+
+    return ESP_OK;
+}
@@ -0,0 +1,100 @@
+#pragma once
+
+#include <stddef.h>
+#include <stdint.h>
+#include "esp_err.h"
+
+/* Waveshare 13.3" e-Paper (E) Spectra 6 panel, driven by Seeed's EE02
+ * board (XIAO ESP32-S3 Plus). The panel is marketed/mounted as a
+ * 1600x1200 landscape rectangle (270.40x202.80mm), but its SPI
+ * controller addresses a native raster of 1200 columns x 1600 rows --
+ * i.e. the wire format is portrait, rotated 90 degrees from how the
+ * panel physically hangs. Confirmed identically across three independent
+ * vendor sources: Waveshare's RaspberryPi/c and ESP32 reference drivers
+ * for this exact panel (E-paper_Separate_Program/13.3inch_e-Paper_E in
+ * waveshare/e-Paper), and Waveshare's own ESP-IDF example for their
+ * ESP32-S3-ePaper-13.3E6 driver board (a *different* carrier board than
+ * Seeed's EE02, but the same panel+controller, hence the same command
+ * bytes/geometry -- only the GPIO numbers differ, and those come from
+ * EE02-specific sources, see this component's Kconfig). All three define
+ * EPD_WIDTH=1200/EPD_HEIGHT=1600 and split each row into two 600-byte
+ * (300px) halves sent to independent chip-selects: EPD_PIN_CS_MASTER
+ * gets the left half, EPD_PIN_CS_SLAVE the right -- see epd13in3e.c.
+ *
+ * Getting this backwards (assuming the wire raster matches the
+ * 1600x1200 mount/marketing size) doesn't just rotate the image -- 1600
+ * and 1200 don't share a row stride with 1200 and 1600 the other way
+ * (800 bytes/row x 1200 rows vs 600 bytes/row x 1600 rows), so a mismatch
+ * here slices real image rows at the wrong byte offsets and shreds the
+ * picture into a repeating diagonal garble, not a clean rotation.
+ * server/app/image_pipeline.py's PANEL_WIRE_TRANSPOSE handles the
+ * corresponding rotation server-side before packing bytes for this
+ * panel_type -- this header and that dict must agree on which axis is
+ * native. */
+#define EPD_WIDTH 1200
+#define EPD_HEIGHT 1600
+#define EPD_BYTES_PER_ROW ((EPD_WIDTH + 1) / 2)
+#define EPD_FRAME_BYTES (EPD_BYTES_PER_ROW * EPD_HEIGHT)
+
+/* Same 6-ink Spectra family as the 7.3" panel, and (now confirmed by the
+ * same three vendor sources as the geometry above) the same 4-bit nibble
+ * codes as epd7in3e.h's epd_color_t -- matches
+ * server/app/image_pipeline.py's PANEL_CODES unconditionally, no
+ * panel-specific table needed there. */
+typedef enum {
+    EPD_COLOR_BLACK = 0x0,
+    EPD_COLOR_WHITE = 0x1,
+    EPD_COLOR_YELLOW = 0x2,
+    EPD_COLOR_RED = 0x3,
+    EPD_COLOR_BLUE = 0x5,
+    EPD_COLOR_GREEN = 0x6,
+} epd_color_t;
+
+/** Configures SPI + GPIO and runs the panel's power-on register init sequence. */
+esp_err_t epd_init(void);
+
+/** Fills the whole panel with a single color and refreshes. */
+esp_err_t epd_clear(epd_color_t color);
+
+/**
+ * Called repeatedly by epd_display_stream() to fill up to chunk_size bytes
+ * into chunk. Must return the number of bytes written, or 0 once exhausted.
+ */
+typedef size_t (*epd_read_fn_t)(uint8_t *chunk, size_t chunk_size, void *ctx);
+
+/**
+ * Streams a full frame (EPD_FRAME_BYTES bytes, packed 2 pixels/byte) to the
+ * panel via read_fn and refreshes. Pulling from a caller-supplied source
+ * instead of a single buffer lets callers feed the panel directly from an
+ * HTTP response without holding the whole ~960KB frame in RAM.
+ */
+esp_err_t epd_display_stream(epd_read_fn_t read_fn, void *ctx);
+
+/**
+ * Like epd_display_stream(), but writes the frame into the panel's
+ * internal buffer over SPI WITHOUT triggering the physical refresh (the
+ * visible flash/flicker) -- call epd_turn_on_display() separately to make
+ * it visible. Returns ESP_ERR_INVALID_SIZE if read_fn didn't supply
+ * exactly EPD_FRAME_BYTES, same as epd_display_stream(); either way
+ * nothing is refreshed, so the visible screen is left untouched on
+ * error.
+ *
+ * If out_crc32 is non-NULL, it's set to a CRC32 of the bytes written --
+ * lets a caller compare against the last-displayed frame's CRC and skip
+ * the refresh entirely when nothing actually changed (e.g. redisplaying
+ * the same photo after a reboot).
+ */
+esp_err_t epd_write_frame(epd_read_fn_t read_fn, void *ctx, uint32_t *out_crc32);
+
+/**
+ * Triggers the panel's physical refresh cycle (power on, refresh, power
+ * off) -- the visible flash/flicker sequence. Call after epd_write_frame()
+ * to make the written buffer visible.
+ */
+esp_err_t epd_turn_on_display(void);
+
+/** Convenience wrapper around epd_display_stream() for an in-memory frame buffer. */
+esp_err_t epd_display_buffer(const uint8_t *frame, size_t len);
+
+/** Puts the panel into deep sleep to minimize power draw between refreshes. */
+esp_err_t epd_sleep(void);
@@ -1,3 +1,15 @@
-idf_component_register(SRCS "epd7in3e.c"
+# SRCS is conditional on which board's panel this build targets (see
+# main/CMakeLists.txt's comment on why REQUIRES/PRIV_REQUIRES itself
+# can't be) -- an ee02 build still always requires this component (so
+# its Kconfig menu/include dir exist), but contributes zero object
+# files/symbols to it, since epd13in3e.c provides the real epd_init()
+# etc. for that board instead.
+if(CONFIG_FRAME_PANEL_EE02_13IN3)
+    set(srcs "")
+else()
+    set(srcs "epd7in3e.c")
+endif()
+
+idf_component_register(SRCS ${srcs}
                       INCLUDE_DIRS "include"
                       PRIV_REQUIRES esp_driver_spi esp_driver_gpio)
@@ -1,3 +1,15 @@
+# Both EPD driver components are always REQUIRED (REQUIRES/PRIV_REQUIRES
+# can't itself depend on a Kconfig value -- ESP-IDF resolves the
+# component dependency graph in an early pass that runs BEFORE Kconfig
+# is generated, so a CONFIG_* check here would silently see an empty
+# value every time; confirmed the hard way, see git history if this
+# comment ever seems suspicious). Which one actually compiles anything
+# is decided inside each component's own CMakeLists.txt (conditional
+# SRCS, evaluated in the later, Kconfig-aware pass -- that's fine, it's
+# only REQUIRES itself that has the early-pass restriction), keyed off
+# the same CONFIG_FRAME_PANEL_EE02_13IN3 that main/epd_board.h uses to
+# pick which header every source file sees -- exactly one of the two
+# ever contributes actual object files/symbols to a given build.
 idf_component_register(SRCS main.c wifi_provisioning.c frame_client.c qr_onboarding.c status_screen.c epd_draw.c next_button.c back_button.c combo_button.c battery.c ota_update.c board_antenna.c
-                       PRIV_REQUIRES esp_event nvs_flash esp_wifi esp_netif esp_http_server esp_http_client mbedtls dns_server epd7in3e qrcode epaper_fonts esp_driver_gpio esp_adc esp_https_ota app_update esp_app_format
+                       PRIV_REQUIRES esp_event nvs_flash esp_wifi esp_netif esp_http_server esp_http_client mbedtls dns_server epd7in3e epd13in3e qrcode epaper_fonts esp_driver_gpio esp_adc esp_https_ota app_update esp_app_format
                       EMBED_FILES root.html)
@@ -2,18 +2,29 @@ menu "ESPresso Frame Configuration"

    config FRAME_BOARD_NAME
        string "Board variant name, reported to the server"
-        default "devkit"
+        default "devkit_esp32c6"
        help
            Sent as the X-Frame-Board request header on every
            GET /frame/config poll, so the server can learn which board
            this device is and automatically fetch the right OTA build
-            from a configured Gitea repo's releases -- no manual "which
-            board" picker in the web UI. Must match one of the asset
-            names .gitea/workflows/firmware-release-build.yml publishes
-            (firmware-<name>.bin): "devkit" (this default, for the
-            plain ESP32-C6-DevKitC-1 build) or "xiao" (set via
-            sdkconfig.xiao for the Seeed XIAO ESP32-C6 build -- see
-            build_for_board.sh).
+            from a configured Gitea repo's releases, and (see
+            routers/device.py's BOARD_PANEL_MAP) which EPD panel it
+            drives -- no manual "which board/panel" picker in the web
+            UI. Must match one of the asset names
+            .gitea/workflows/firmware-release-build.yml publishes
+            (firmware-<name>.bin): "devkit_esp32c6" (this default, for
+            the plain ESP32-C6-DevKitC-1 build), "xiao_esp32c6" (set via
+            sdkconfig.xiao for the Seeed XIAO ESP32-C6 build), or "ee02"
+            (set via sdkconfig.ee02 for the Seeed EE02/XIAO ESP32-S3
+            Plus + 13.3" panel build) -- see build_for_board.sh.
+
+            Chip-qualified rather than plain "devkit"/"xiao": the EE02
+            board also sockets a XIAO module (an ESP32-S3 one), so
+            "xiao" alone stopped disambiguating hardware once EE02
+            existed. The server keeps accepting the old bare
+            "devkit"/"xiao" names indefinitely too, since already-
+            flashed devices report whatever name their current firmware
+            was built with and can't be retroactively renamed.

    config FRAME_XIAO_ANTENNA_INIT
        bool "Select onboard antenna on Seeed XIAO ESP32-C6 (RF switch init)"
@@ -33,6 +44,18 @@ menu "ESPresso Frame Configuration"
            by default in sdkconfig.xiao; leave off for the DevKitC-1
            dev board, which has no such switch.

+    config FRAME_PANEL_EE02_13IN3
+        bool "Build for the EE02 board + 13.3in Spectra 6 panel (ESP32-S3), not the 7.3in panel"
+        default n
+        help
+            Selects the epd13in3e driver component (13.3", 1600x1200)
+            instead of epd7in3e (7.3", 800x480) as main/epd_board.h's
+            target -- see firmware/components/epd13in3e. Firmware only
+            ever links one EPD driver at a time, same as the
+            devkit/xiao split links exactly one board's pin config.
+            Enabled by default in sdkconfig.ee02; leave off for the
+            ESP32-C6 boards (devkit/xiao), which drive the 7.3" panel.
+
    config ESP_AP_SSID
        string "Provisioning softAP SSID prefix"
        default "ESPRESSO"
@@ -119,6 +142,7 @@ menu "ESPresso Frame Configuration"
    config FRAME_NEXT_BUTTON_GPIO
        int "Next-photo button GPIO (-1 to disable)"
        default 2
+        range -1 21 if IDF_TARGET_ESP32S3
        range -1 7
        help
            Button wired between this GPIO and GND (active-low, internal
@@ -126,14 +150,17 @@ menu "ESPresso Frame Configuration"
            Pressing it wakes the device (if asleep), forces the server to
            advance to the next photo immediately (POST /frame/advance)
            regardless of the configured refresh interval, and displays
-            it. Must be GPIO 0-7 -- the only pins the ESP32-C6 can use as
-            a deep-sleep GPIO wakeup source, which is what lets a press
-            wake the device promptly instead of only being noticed during
-            its brief awake windows. Set to -1 to disable the feature.
+            it. Must be a deep-sleep-wakeup-capable GPIO: 0-7 on the
+            ESP32-C6, 0-21 on the ESP32-S3 (RTC-IO pins reachable by
+            esp_sleep_enable_ext1_wakeup_io()) -- required so a press
+            wakes the device promptly instead of only being noticed
+            during its brief awake windows. Set to -1 to disable the
+            feature.

    config FRAME_BACK_BUTTON_GPIO
        int "Back-photo button GPIO (-1 to disable)"
        default 0
+        range -1 21 if IDF_TARGET_ESP32S3
        range -1 7
        help
            Button wired between this GPIO and GND (active-low, internal
@@ -142,13 +169,14 @@ menu "ESPresso Frame Configuration"
            to return to the previously-current photo immediately
            (POST /frame/back), and displays it. Pressing next
            afterwards returns to where you were before pressing back.
-            Must be GPIO 0-7 for the same deep-sleep-wakeup reason as
+            Must be a deep-sleep-wakeup-capable GPIO, same range as
            FRAME_NEXT_BUTTON_GPIO above; defaults to a different pin
            than the other buttons. Set to -1 to disable the feature.

    config FRAME_COMBO_BUTTON_GPIO
        int "Menu/reset button GPIO (-1 to disable)"
        default 1
+        range -1 21 if IDF_TARGET_ESP32S3
        range -1 7
        help
            Button wired between this GPIO and GND (active-low, internal
@@ -159,8 +187,8 @@ menu "ESPresso Frame Configuration"
            then releasing shows the management menu; holding it all the
            way to FRAME_COMBO_FACTORY_RESET_HOLD_MS clears the stored
            config and restarts into provisioning, regardless of whether
-            it's released yet. Must be GPIO 0-7 for the same deep-sleep-
-            wakeup reason as FRAME_NEXT_BUTTON_GPIO above; defaults to
+            it's released yet. Must be a deep-sleep-wakeup-capable GPIO,
+            same range as FRAME_NEXT_BUTTON_GPIO above; defaults to
            a different pin than the other buttons. Set to -1 to
            disable the feature entirely (also disables the management
            menu, both reset tiers, and factory-reset-via-button --
@@ -3,6 +3,7 @@
 #include "driver/gpio.h"
 #include "esp_log.h"
 #include "esp_sleep.h"
+#include "soc/soc_caps.h"

 #include "freertos/FreeRTOS.h"
 #include "freertos/task.h"
@@ -35,10 +36,17 @@ void back_button_init(void)
    };
    gpio_config(&io_conf);

+#if SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP
    /* See next_button.c for why this API (not ext1) -- it manages the
     * pull resistor across the sleep transition itself, so the pin
     * doesn't float and wake the device spuriously. */
    esp_sleep_enable_gpio_wakeup_on_hp_periph_powerdown(1ULL << BACK_BUTTON_GPIO, ESP_GPIO_WAKEUP_GPIO_LOW);
+#else
+    /* See next_button.c for why ext1 is safe here on targets without the
+     * API above (e.g. ESP32-S3), and why _io() needs no cross-file mask
+     * coordination. */
+    ESP_ERROR_CHECK(esp_sleep_enable_ext1_wakeup_io(1ULL << BACK_BUTTON_GPIO, ESP_EXT1_WAKEUP_ANY_LOW));
+#endif
 }

 back_button_result_t back_button_check(void)
@@ -49,7 +57,11 @@ back_button_result_t back_button_check(void)
     * status register is latched at the moment of waking and isn't
     * cleared until the next sleep entry, so it reliably reflects a tap
     * regardless of how quickly it was released. */
+#if SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP
    bool caused_wake = esp_sleep_get_gpio_wakeup_status() & (1ULL << BACK_BUTTON_GPIO);
+#else
+    bool caused_wake = esp_sleep_get_ext1_wakeup_status() & (1ULL << BACK_BUTTON_GPIO);
+#endif

    if (!caused_wake) {
        /* Not a GPIO-wakeup-from-this-pin boot (normal timer wake, or a
@@ -1,6 +1,7 @@
 #include "driver/gpio.h"
 #include "esp_log.h"
 #include "esp_sleep.h"
+#include "soc/soc_caps.h"

 #include "freertos/FreeRTOS.h"
 #include "freertos/task.h"
@@ -31,10 +32,17 @@ void combo_button_init(void)
    };
    gpio_config(&io_conf);

+#if SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP
    /* See next_button.c for why this API (not ext1) -- it manages the
     * pull resistor across the sleep transition itself, so the pin
     * doesn't float and wake the device spuriously. */
    esp_sleep_enable_gpio_wakeup_on_hp_periph_powerdown(1ULL << COMBO_BUTTON_GPIO, ESP_GPIO_WAKEUP_GPIO_LOW);
+#else
+    /* See next_button.c for why ext1 is safe here on targets without the
+     * API above (e.g. ESP32-S3), and why _io() needs no cross-file mask
+     * coordination. */
+    ESP_ERROR_CHECK(esp_sleep_enable_ext1_wakeup_io(1ULL << COMBO_BUTTON_GPIO, ESP_EXT1_WAKEUP_ANY_LOW));
+#endif
 }

 bool combo_button_check(void)
@@ -48,7 +56,11 @@ bool combo_button_check(void)
     * caused the wake even if it's since been released -- in which case
     * the poll loop below simply measures 0ms held, correctly resolving
     * to a quick press rather than "not pressed at all." */
+#if SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP
    bool caused_wake = esp_sleep_get_gpio_wakeup_status() & (1ULL << COMBO_BUTTON_GPIO);
+#else
+    bool caused_wake = esp_sleep_get_ext1_wakeup_status() & (1ULL << COMBO_BUTTON_GPIO);
+#endif
    if (!caused_wake && gpio_get_level(COMBO_BUTTON_GPIO) != 0) {
        return false; /* not pressed, and didn't cause this wake either */
    }
@@ -0,0 +1,17 @@
+#pragma once
+
+/* Which EPD driver component this binary is built against -- exactly one,
+ * selected at compile time by CONFIG_FRAME_PANEL_EE02_13IN3 (see
+ * main/Kconfig.projbuild and main/CMakeLists.txt's matching PRIV_REQUIRES
+ * selection). Every file that used to `#include "epd7in3e.h"` directly
+ * includes this instead, so a build for the other board picks up the
+ * right EPD_WIDTH/EPD_HEIGHT/EPD_FRAME_BYTES/epd_color_t/epd_init() etc.
+ * with no other source change -- both driver components expose the same
+ * function/macro names (see epd13in3e.h), just sized for their own
+ * panel. */
+
+#if CONFIG_FRAME_PANEL_EE02_13IN3
+#include "epd13in3e.h"
+#else
+#include "epd7in3e.h"
+#endif
@@ -3,10 +3,10 @@
 #include <stddef.h>
 #include <stdint.h>

-#include "epd7in3e.h"
+#include "epd_board.h"
 #include "fonts.h"

-/** Sets one pixel in a malloc'd EPD_FRAME_BYTES buffer (packed 2px/byte, per epd7in3e.h). */
+/** Sets one pixel in a malloc'd EPD_FRAME_BYTES buffer (packed 2px/byte, per epd_board.h). */
 void epd_draw_pixel(uint8_t *frame, int x, int y, epd_color_t color);

 /**
@@ -14,7 +14,7 @@
 #include "freertos/FreeRTOS.h"
 #include "freertos/event_groups.h"

-#include "epd7in3e.h"
+#include "epd_board.h"
 #include "status_screen.h"
 #include "combo_button.h"
 #include "ota_update.h"
@@ -95,18 +95,15 @@ static void save_wifi_cache(esp_netif_t *netif)
 }

 /* Builds a full URL from cfg->toolsserver + a path (no leading slash),
- * appending cfg->access_token as ?token= if one's set. toolsserver is
- * normally a bare "host:port", defaulting to plain http; it may instead
- * carry an explicit "http://" or "https://" prefix to pick the scheme,
- * e.g. "https://frame.example.com" if a reverse proxy is terminating
- * TLS in front of the tools server. Every URL carries ?id= (the device's
- * MAC-derived identity -- how a multi-frame server tells frames apart
- * and how an unknown frame self-registers) plus &token=: the server-
- * issued per-frame device token once one has been delivered via
- * /frame/config, else the provisioned access token (the legacy shared
- * secret, also what a pre-multi-frame server still expects). This is
- * the one chokepoint all requests go through, so every caller gets both
- * for free instead of needing to remember to add them. */
+ * appending cfg->device_token as &token= once one's been delivered.
+ * toolsserver is normally a bare "host:port", defaulting to plain http;
+ * it may instead carry an explicit "http://" or "https://" prefix to
+ * pick the scheme, e.g. "https://frame.example.com" if a reverse proxy
+ * is terminating TLS in front of the tools server. Every URL carries
+ * ?id= (the device's MAC-derived identity -- how a multi-frame server
+ * tells frames apart and how an unknown frame self-registers) plus
+ * &token=. This is the one chokepoint all requests go through, so every
+ * caller gets both for free instead of needing to remember to add them. */
 static void build_url(char *out, size_t out_size, const frame_config_t *cfg, const char *path)
 {
    const char *toolsserver = cfg->toolsserver;
@@ -123,9 +120,8 @@ static void build_url(char *out, size_t out_size, const frame_config_t *cfg, con
        len += (size_t)snprintf(out + len, out_size - len, "?id=%s", device_id);
    }

-    const char *token = cfg->device_token[0] != '\0' ? cfg->device_token : cfg->access_token;
-    if (token[0] != '\0' && len < out_size) {
-        snprintf(out + len, out_size - len, "&token=%s", token);
+    if (cfg->device_token[0] != '\0' && len < out_size) {
+        snprintf(out + len, out_size - len, "&token=%s", cfg->device_token);
    }
 }

@@ -464,9 +460,9 @@ static size_t http_read_fn(uint8_t *chunk, size_t chunk_size, void *ctx_)
 * to bake its overlay into this same response instead of returning the
 * bare content -- see server/app/routers/device.py. Returning non-ESP_OK
 * means the panel was never actually refreshed -- epd_display_stream()
- * (see epd7in3e.c) refuses to trigger a physical refresh on a short/
- * wrong-size stream, so a failure here always leaves the visible screen
- * exactly as it was. */
+ * (see the active EPD driver component, main/epd_board.h) refuses to
+ * trigger a physical refresh on a short/wrong-size stream, so a failure
+ * here always leaves the visible screen exactly as it was. */
 static esp_err_t fetch_and_display(const frame_config_t *cfg, fetch_action_t action, bool manage)
 {
    const char *path = "frame/image";
@@ -691,10 +687,11 @@ void frame_client_run(const frame_config_t *cfg, fetch_action_t action, bool sho
        image_ok = (fetch_err == ESP_OK);
        if (!image_ok) {
            /* epd_display_stream() never triggers a physical refresh on a
-             * failed/short/wrong-size stream (see epd7in3e.c), so the
-             * visible screen is guaranteed untouched here -- always safe
-             * to show what went wrong instead of leaving stale content
-             * with no indication anything failed. */
+             * failed/short/wrong-size stream (see the active EPD driver
+             * component, main/epd_board.h), so the visible screen is
+             * guaranteed untouched here -- always safe to show what went
+             * wrong instead of leaving stale content with no indication
+             * anything failed. */
            ESP_LOGW(TAG, "Fetch/display failed (%s), retrying sooner", esp_err_to_name(fetch_err));
            /* Covers the fast-connect cache's blind spot: WiFi can report
             * a successful connection (cached static IP "worked" at the
@@ -3,6 +3,7 @@
 #include "driver/gpio.h"
 #include "esp_log.h"
 #include "esp_sleep.h"
+#include "soc/soc_caps.h"

 #include "freertos/FreeRTOS.h"
 #include "freertos/task.h"
@@ -36,13 +37,44 @@ void next_button_init(void)
    };
    gpio_config(&io_conf);

-    /* Not esp_sleep_enable_ext1_wakeup_io(): its internal pull resistors
-     * don't hold once the RTC_PERIPH domain powers down for deep sleep, so
-     * the pin floats and reads spuriously low, waking the device instantly
-     * on every sleep entry (confirmed on hardware). This GPIO-wakeup
-     * variant manages the pull resistor itself across the sleep
-     * transition. */
+#if SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP
+    /* Not esp_sleep_enable_ext1_wakeup_io() on its own: on a target
+     * without RTC-independent digital pull registers, ext1's internal
+     * pull resistors don't hold once the RTC_PERIPH domain powers down
+     * for deep sleep, so the pin floats and reads spuriously low, waking
+     * the device instantly on every sleep entry (confirmed on hardware,
+     * ESP32-C6). This GPIO-wakeup variant manages the pull resistor
+     * itself across the sleep transition, sidestepping the issue
+     * entirely -- but it only exists on chips with this capability
+     * (currently just ESP32-C6; see the #else below for other targets,
+     * e.g. ESP32-S3). */
    esp_sleep_enable_gpio_wakeup_on_hp_periph_powerdown(1ULL << NEXT_BUTTON_GPIO, ESP_GPIO_WAKEUP_GPIO_LOW);
+#else
+    /* No HP-periph-powerdown wakeup API here (e.g. ESP32-S3) -- fall
+     * back to ext1, but NOT naively: on every non-original-ESP32 target
+     * (ESP32-S3 included), gpio_pullup_en() -- which the gpio_config()
+     * call above invokes via pull_up_en -- delegates to
+     * rtc_gpio_pullup_en() for RTC-capable pins (confirmed in
+     * esp_driver_gpio's gpio.c: GPIO_RTCIO_ARE_INDEPENDENT is 1 for
+     * every target except the original ESP32, meaning digital and RTC
+     * pull registers are independent hardware and gpio_config() already
+     * routes the pull-up through the RTC pad's own register for these
+     * pins, not just the digital one). That's exactly what was missing
+     * in the ext1 attempt that failed on hardware above -- so on this
+     * target the pull-up already survives the RTC_PERIPH power-down
+     * ext1 wakeup requires, without needing a separate rtc_gpio_*_en()
+     * call here. _io() (not the bare esp_sleep_enable_ext1_wakeup(),
+     * which resets any previously-configured mask) is additive across
+     * this file's, back_button.c's, and combo_button.c's independent
+     * init calls -- confirmed in esp_hw_support's sleep_modes.c -- so no
+     * shared-mask coordination between the three button files is
+     * needed. Still unconfirmed on real EE02 hardware: this avoids the
+     * *documented* failure mode of the earlier ext1 attempt, but that
+     * attempt was never root-caused beyond "confirmed spurious wakeup on
+     * hardware" -- treat this as untested until it's actually run on an
+     * EE02 board. */
+    ESP_ERROR_CHECK(esp_sleep_enable_ext1_wakeup_io(1ULL << NEXT_BUTTON_GPIO, ESP_EXT1_WAKEUP_ANY_LOW));
+#endif
 }

 next_button_result_t next_button_check(void)
@@ -53,7 +85,11 @@ next_button_result_t next_button_check(void)
     * status register is latched at the moment of waking and isn't
     * cleared until the next sleep entry, so it reliably reflects a tap
     * regardless of how quickly it was released. */
+#if SOC_GPIO_SUPPORT_HP_PERIPH_PD_SLEEP_WAKEUP
    bool caused_wake = esp_sleep_get_gpio_wakeup_status() & (1ULL << NEXT_BUTTON_GPIO);
+#else
+    bool caused_wake = esp_sleep_get_ext1_wakeup_status() & (1ULL << NEXT_BUTTON_GPIO);
+#endif

    if (!caused_wake) {
        /* Not a GPIO-wakeup-from-this-pin boot (normal timer wake, or a
@@ -36,9 +36,8 @@ static void build_ota_url(char *out, size_t out_size, const frame_config_t *cfg)
        len += (size_t)snprintf(out + len, out_size - len, "?id=%s", device_id);
    }

-    const char *token = cfg->device_token[0] != '\0' ? cfg->device_token : cfg->access_token;
-    if (token[0] != '\0' && len < out_size) {
-        snprintf(out + len, out_size - len, "&token=%s", token);
+    if (cfg->device_token[0] != '\0' && len < out_size) {
+        snprintf(out + len, out_size - len, "&token=%s", cfg->device_token);
    }
 }

@@ -4,7 +4,7 @@
 #include "esp_check.h"
 #include "esp_log.h"

-#include "epd7in3e.h"
+#include "epd_board.h"
 #include "epd_draw.h"
 #include "fonts.h"
 #include "qrcodegen.h"
@@ -97,11 +97,6 @@
                <input type="text" id="toolsserver" name="toolsserver" placeholder="e.g. 192.168.1.50:8080 or https://frame.example.com" maxlength="128" required>
            </div>

-            <div class="input-group">
-                <label for="access_token">Access Token (optional &mdash; only for older servers)</label>
-                <input type="text" id="access_token" name="access_token" placeholder="usually blank; current servers issue one automatically" maxlength="64">
-            </div>
-
            <p style="font-size: 13px; color: #555;">After saving, this page will
                take you to the server to claim your frame &mdash; reconnect to
                your normal WiFi if it doesn't happen automatically.</p>
@@ -3,7 +3,7 @@

 #include "esp_check.h"

-#include "epd7in3e.h"
+#include "epd_board.h"
 #include "epd_draw.h"
 #include "fonts.h"
 #include "wifi_provisioning.h"
@@ -19,7 +19,7 @@
 #include "freertos/FreeRTOS.h"
 #include "freertos/task.h"

-#include "epd7in3e.h"
+#include "epd_board.h"
 #include "qr_onboarding.h"
 #include "wifi_provisioning.h"
 #include "board_antenna.h"
@@ -73,20 +73,10 @@ esp_err_t frame_config_load(frame_config_t *out)
        return pass_err;
    }

-    /* Also optional -- most deployments won't set a server-side
-     * MANAGEMENT_TOKEN at all, in which case this stays empty and the
-     * manage-menu QR just links to the page with no ?token=. */
-    len = sizeof(out->access_token);
-    esp_err_t token_err = nvs_get_str(handle, "access_token", out->access_token, &len);
-    if (token_err != ESP_OK && token_err != ESP_ERR_NVS_NOT_FOUND) {
-        nvs_close(handle);
-        return token_err;
-    }
-
    /* Optional: absent until the server has pushed a per-frame token
     * (see frame_config_set_device_token). */
    len = sizeof(out->device_token);
-    token_err = nvs_get_str(handle, "device_token", out->device_token, &len);
+    esp_err_t token_err = nvs_get_str(handle, "device_token", out->device_token, &len);
    if (token_err != ESP_OK && token_err != ESP_ERR_NVS_NOT_FOUND) {
        nvs_close(handle);
        return token_err;
@@ -131,9 +121,6 @@ esp_err_t frame_config_save(const frame_config_t *cfg)
    if (err == ESP_OK) {
        err = nvs_set_str(handle, "toolsserver", cfg->toolsserver);
    }
-    if (err == ESP_OK) {
-        err = nvs_set_str(handle, "access_token", cfg->access_token);
-    }
    if (err == ESP_OK) {
        /* Re-provisioning restarts the identity handshake: the server
         * (possibly a different one now) re-issues a device token when
@@ -191,7 +178,6 @@ void frame_config_clear(void)
    nvs_erase_key(handle, "sta_ssid");
    nvs_erase_key(handle, "sta_pass");
    nvs_erase_key(handle, "toolsserver");
-    nvs_erase_key(handle, "access_token");
    nvs_erase_key(handle, "device_token");
    nvs_erase_key(handle, "connected_once");
    nvs_commit(handle);
@@ -452,7 +438,6 @@ static esp_err_t save_config_post_handler(httpd_req_t *req)
    extract_form_value(body, "ssid", cfg.sta_ssid, sizeof(cfg.sta_ssid));
    extract_form_value(body, "password", cfg.sta_password, sizeof(cfg.sta_password));
    extract_form_value(body, "toolsserver", cfg.toolsserver, sizeof(cfg.toolsserver));
-    extract_form_value(body, "access_token", cfg.access_token, sizeof(cfg.access_token));

    if (strlen(cfg.sta_ssid) == 0 || strlen(cfg.toolsserver) == 0) {
        httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "SSID and Tools Server are required");
@@ -466,8 +451,7 @@ static esp_err_t save_config_post_handler(httpd_req_t *req)
        return ESP_FAIL;
    }

-    ESP_LOGI(TAG, "Saved config: ssid='%s' toolsserver='%s' access_token=%s", cfg.sta_ssid, cfg.toolsserver,
-             strlen(cfg.access_token) ? "set" : "none");
+    ESP_LOGI(TAG, "Saved config: ssid='%s' toolsserver='%s'", cfg.sta_ssid, cfg.toolsserver);

    /* The success page hands the browser off to the server's claim page,
     * carrying this device's id -- how a frame gets linked to a user
@@ -17,11 +17,10 @@ typedef struct {
    char sta_ssid[FRAME_CFG_SSID_MAX_LEN + 1];
    char sta_password[FRAME_CFG_PASSWORD_MAX_LEN + 1];
    char toolsserver[FRAME_CFG_SERVER_MAX_LEN + 1];
-    char access_token[FRAME_CFG_TOKEN_MAX_LEN + 1]; /* optional; legacy shared MANAGEMENT_TOKEN */
    /* Per-frame token issued by the server via GET /frame/config after
-     * this device first introduces itself by id -- preferred over
-     * access_token once present (see frame_client.c's build_url). Not
-     * set at the captive portal; empty until the server pushes one. */
+     * this device first introduces itself by id (see frame_client.c's
+     * build_url). Not set at the captive portal; empty until the server
+     * pushes one. */
    char device_token[FRAME_CFG_TOKEN_MAX_LEN + 1];
 } frame_config_t;

@@ -0,0 +1,13 @@
+# Name,   Type, SubType, Offset,   Size,     Flags
+# Same OTA layout/offsets as partitions.csv (the 8MB dev-board table) --
+# the XIAO ESP32-S3 Plus's 16MB flash has plenty of room for the same
+# 2MB app slots (current firmware runs ~1.2MB, per partitions_xiao.csv's
+# own sizing note) without needing to trim anything the way the 4MB xiao
+# table did. Leaves ~12MB of the 16MB unused/unpartitioned for now --
+# revisit sizing once a real build's actual footprint and any EE02-
+# specific storage needs (if ever) are known.
+nvs,      data, nvs,     0x9000,   0x6000,
+phy_init, data, phy,     0xf000,   0x1000,
+ota_0,    app,  ota_0,   0x10000,  0x200000,
+otadata,  data, ota,     0x210000, 0x2000,
+ota_1,    app,  ota_1,   0x220000, 0x200000,
@@ -0,0 +1,50 @@
+# Board-specific overrides for Seeed's EE02 (XIAO ESP32-S3 Plus + 13.3"
+# Spectra 6 panel), layered on top of sdkconfig.defaults via
+# SDKCONFIG_DEFAULTS -- see build_for_board.sh, which is the supported
+# way to build with this file. Don't set this via a plain `idf.py
+# menuconfig` on the default build; that writes straight into the shared
+# sdkconfig, not this file.
+#
+# Unlike xiao (a same-chip Kconfig-only variant of the ESP32-C6 dev
+# board), EE02 is a genuinely different chip target (ESP32-S3) --
+# build_for_board.sh runs `set-target esp32s3` for this board before
+# building, same as it runs `set-target esp32c6` for devkit/xiao.
+CONFIG_FRAME_BOARD_NAME="ee02"
+
+# Selects the epd13in3e driver component (13.3", 1600x1200) instead of
+# epd7in3e -- see main/Kconfig.projbuild and main/CMakeLists.txt.
+CONFIG_FRAME_PANEL_EE02_13IN3=y
+
+# XIAO ESP32-S3 Plus: 16MB flash, 8MB PSRAM (vs. the plain XIAO ESP32-S3's
+# 8MB/8MB) -- see partitions_ee02.csv, sized generously against this,
+# not yet trimmed/tuned against a real build's actual footprint.
+CONFIG_ESPTOOLPY_FLASHSIZE_16MB=y
+CONFIG_PARTITION_TABLE_CUSTOM_FILENAME="partitions_ee02.csv"
+CONFIG_PARTITION_TABLE_FILENAME="partitions_ee02.csv"
+
+# EE02's e-paper interface pin defaults live in
+# firmware/components/epd13in3e/Kconfig instead of being overridden here
+# (mirrors how epd7in3e's Kconfig defaults are devkit-shaped and
+# sdkconfig.xiao only overrides the ones that actually differ) -- EE02's
+# pins are a different Kconfig menu entirely (EPD_PIN_CS_MASTER/CS_SLAVE/
+# POWER_EN don't exist on epd7in3e's board at all), not a same-menu
+# override, so there's nothing to set here beyond selecting the component
+# above.
+#
+# Deliberately NOT overriding FRAME_NEXT_BUTTON_GPIO/FRAME_BACK_BUTTON_
+# GPIO/FRAME_COMBO_BUTTON_GPIO/FRAME_BATTERY_ADC_GPIO here, even though
+# the same community source that gave the epd13in3e pinout also reports
+# EE02 has 3 user buttons at GPIO2/3/5: which physical button maps to
+# which logical role (next/back/combo) still isn't confirmed. The
+# button GPIOs' `range -1 7` constraint (main/Kconfig.projbuild) -- which
+# used to be hardcoded to the ESP32-C6's deep-sleep-wakeup-capable GPIO
+# set -- now widens to `range -1 21` under IDF_TARGET_ESP32S3 (the
+# ESP32-S3's own ext1-wakeup-capable RTC-IO range), so GPIO2/3/5 fit
+# either way and nothing here needs adjusting on that front. What's
+# still unconfirmed: (1) the button-to-role mapping above, and (2)
+# whether the S3 button-wakeup path itself (ext1 + RTC pull-up, see
+# main/next_button.c) actually avoids the spurious-instant-wakeup bug
+# that ruled out ext1 on the ESP32-C6 -- that needs real EE02 hardware,
+# not just a clean compile. FRAME_BATTERY_ADC_GPIO's `range -1 6` is a
+# separate, still-unwidened concern -- it's the ESP32-C6's ADC-capable
+# pin set, not a deep-sleep-wakeup range, and out of scope here.
@@ -8,7 +8,7 @@ CONFIG_ESPTOOLPY_FLASHSIZE_4MB=y
 CONFIG_PARTITION_TABLE_CUSTOM_FILENAME="partitions_xiao.csv"
 CONFIG_PARTITION_TABLE_FILENAME="partitions_xiao.csv"

-CONFIG_FRAME_BOARD_NAME="xiao"
+CONFIG_FRAME_BOARD_NAME="xiao_esp32c6"

 # Powers the XIAO's RF switch and selects its onboard antenna -- without
 # this the softAP/STA radio doesn't reliably reach the antenna at all.
@@ -1 +1 @@
-1.4.1
+1.5.0
@@ -36,9 +36,61 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
    tzdata fontconfig fonts-dejavu-core nodejs npm \
    && rm -rf /var/lib/apt/lists/*

+# EXPERIMENTAL. System libs a headless Chromium needs (app/html_render.py, the weather widget's
+# opt-in "modern" render style), trimmed from Playwright's own full
+# `install-deps chromium` list to just what a headless (no Xvfb),
+# Latin-text-plus-emoji use case needs: dropped xvfb (only needed for a
+# *headed* browser) and the CJK/Cyrillic/Thai locale font packages
+# (fonts-ipafont-gothic, fonts-wqy-zenhei, fonts-tlwg-loma-otf,
+# xfonts-cyrillic, xfonts-scalable, fonts-freefont-ttf, fonts-unifont) --
+# fonts-noto-color-emoji is the one that actually matters here (real
+# color emoji in the weather icons, vs. WeasyPrint/Pango's monochrome
+# fallback glyphs in this feature's original spike).
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libasound2t64 libatk-bridge2.0-0t64 libatk1.0-0t64 libatspi2.0-0t64 \
+    libcairo2 libcups2t64 libdbus-1-3 libdrm2 libgbm1 libglib2.0-0t64 \
+    libnspr4 libnss3 libpango-1.0-0 libx11-6 libxcb1 libxcomposite1 \
+    libxdamage1 libxext6 libxfixes3 libxkbcommon0 libxrandr2 \
+    fonts-noto-color-emoji libfontconfig1 libfreetype6 fonts-liberation \
+    && rm -rf /var/lib/apt/lists/*
+
 COPY requirements.txt .
+# Split across several layers rather than one `pip install -r
+# requirements.txt` -- same Cloudflare single-blob/layer payload-size
+# limit as render-service's npm installs below. The single combined
+# layer was measured at ~113MB unpacked, over the limit on its own.
+# Isolating the largest packages gets every layer's unpacked size well
+# clear of 100MB (sqlalchemy ~15MB, pillow ~19MB, pypdfium2 ~8MB, the
+# remaining `-r requirements.txt` layer ~71MB). Each package version here
+# still comes from requirements.txt (`pip install -r` for everything that
+# doesn't need its own layer skips these, since pip sees them already
+# satisfied); the explicit versions below just control *when* each
+# installs -- same "single source of truth, just splitting *when* it
+# installs" tradeoff as the npm section's --no-save comment below.
+RUN pip install --no-cache-dir sqlalchemy==2.0.51
+RUN pip install --no-cache-dir pillow==12.3.0
+RUN pip install --no-cache-dir pypdfium2==5.12.1
+RUN pip install --no-cache-dir playwright==1.61.0
 RUN pip install --no-cache-dir -r requirements.txt

+# The headless Chromium binary itself is deliberately NOT installed
+# here at build time. `playwright install chromium-headless-shell`
+# unpacks to ~262MB, and its single `chrome-headless-shell` binary alone
+# (measured: 181MB) is one file -- unlike the pip/npm splits above
+# (independently-installable smaller packages moved into their own
+# layers), a single 181MB file can't be divided across multiple <100MB
+# Docker layers by any ordinary COPY/RUN restructuring; the whole file
+# lands in whichever layer's diff contains it, which confirmed-failed
+# to push to this project's registry (the same Cloudflare single-blob/
+# layer limit that forced the pip/npm splits elsewhere in this file --
+# see their comments). Fix: start.sh downloads it at container startup
+# instead, cached on the /data volume (PLAYWRIGHT_BROWSERS_PATH below)
+# so it survives restarts/redeploys and only ever downloads once per
+# volume, not once per image layer. Trade-off: first boot on a fresh
+# volume needs network access to Playwright's CDN -- true of Immich/
+# weather API access too, so not a new requirement for this server.
+ENV PLAYWRIGHT_BROWSERS_PATH=/data/.playwright-browsers
+
 # render-service/'s dependencies installed as several separate layers
 # rather than one `npm install` covering all of them -- a from-scratch
 # push of this image once hit Cloudflare's payload-size limit on a
@@ -37,26 +37,27 @@ algorithm itself -- it just streams the response straight to the panel.
   instead (see `firmware/README.md`'s HTTPS section).
 5. **Each frame gets its own device token automatically** -- the server
   issues it on the frame's first check-in, so there's nothing to
-   configure. The captive portal's **Access Token** field only matters
-   when pointing new firmware at an old (pre-multi-frame) server.
-   `MANAGEMENT_TOKEN` in `docker-compose.yml` is likewise now only the
-   *migration* credential: a frame flashed with pre-multi-frame
-   firmware authenticates with it until it's updated and bound (the
-   Admin page shows the migration state per frame and a "Close legacy
-   window" button for when it's done).
+   configure. `MANAGEMENT_TOKEN` in `docker-compose.yml` is optional and
+   only matters pre-setup: if set, it's the credential that gates who
+   gets to be the one to run first-run setup on a freshly deployed
+   server, before any admin account exists.
 6. **Optional: auto-update firmware from Gitea releases.** If you're
   pushing this repo to a Gitea instance, `.gitea/workflows/firmware-release-build.yml`
-   builds both supported boards and publishes them as release assets
-   (`firmware-xiao.bin`/`firmware-devkit.bin`) whenever `firmware/version.txt`
-   changes on `main`. In a frame's **Configuration** tab, set the
-   **Gitea repo URL**; if the repo is private, also set
-   `GITEA_FIRMWARE_TOKEN` (a read-only PAT) in `docker-compose.yml`.
-   Which board's build to fetch is learned from the frame itself (its
-   `X-Frame-Board` header) -- nothing to pick by hand. The server then
-   periodically checks for a newer release and either shows an "Update
-   frame" button or, with **Automatically apply updates** checked,
-   stages it itself -- either way the frame only actually updates on
-   its own next wake.
+   builds every supported board and publishes them as release assets
+   (`firmware-devkit_esp32c6.bin`/`firmware-xiao_esp32c6.bin`/
+   `firmware-ee02.bin`, plus `firmware-devkit.bin`/`firmware-xiao.bin`
+   duplicates for devices still on pre-rename firmware) whenever
+   `firmware/version.txt` changes on `main`. In a frame's
+   **Configuration** tab, set the **Gitea repo URL**; if the repo is
+   private, also set `GITEA_FIRMWARE_TOKEN` (a read-only PAT) in
+   `docker-compose.yml`. Which board's build to fetch is learned from the
+   frame itself (its `X-Frame-Board` header) -- nothing to pick by hand.
+   The same header also determines which EPD panel the frame renders for
+   (`Frame.panel_type`, see `docs/hardware.md`'s board identifiers
+   section) -- also never a manual setting. The server then periodically
+   checks for a newer release and either shows an "Update frame" button
+   or, with **Automatically apply updates** checked, stages it itself --
+   either way the frame only actually updates on its own next wake.

 ## Users, frames, and control

@@ -91,19 +92,30 @@ algorithm itself -- it just streams the response straight to the panel.
  again until a recharge is detected and it crosses again. No SMTP
  configured, or no email on the relevant account, and both features
  silently no-op rather than erroring.
+- **Server logs.** `/admin/logs` shows the tail of the process's own
+  log file (`LOG_PATH` env var, default `/data/server.log` -- the same
+  `/data` volume as the database and legacy config, so it survives
+  container restarts/redeploys; `LOG_LEVEL` env var, default `INFO`).
+  Rotates at ~2MB x 3 backups; the page only reads the current file,
+  "Download full log" streams it raw. There's no log shipping/
+  aggregation beyond this -- it's a single-container deployment, so
+  the file *is* the log.

 ## Endpoints

 Pages: `/` (routing hub), `/setup`, `/login`, `/claim`, `/settings`,
-`/admin`, `/frames/{id}` (Photos), `/frames/{id}/config`,
+`/admin`, `/admin/logs`, `/frames/{id}` (Photos), `/frames/{id}/config`,
 `/frames/{id}/stats`, `/m/{manage_token}`.

 ### Device protocol (`/frame/*` -- paths frozen; auth = `?id=` + `?token=`)

 - `GET /frame/image` -- the frame's current image, pre-processed into
-  the panel's raw 800x480, 4-bit-per-pixel, 2-pixels-per-byte format
-  (`application/octet-stream`, exactly 192,000 bytes). **Side-effect-free**
-  by default: it only actually advances once `refresh_interval_s` has
+  the panel's raw 4-bit-per-pixel, 2-pixels-per-byte format
+  (`application/octet-stream`) -- 800x480/exactly 192,000 bytes for the
+  original 7.3" panel, 1600x1200/exactly 960,000 bytes for the 13.3"
+  panel (see `Frame.panel_type`/`image_pipeline.PANEL_SPECS`; a given
+  device's byte count is fixed by which firmware/panel it actually is).
+  **Side-effect-free** by default: it only actually advances once `refresh_interval_s` has
  elapsed since the current photo was set, so an unexpected reboot just
  redisplays the same photo. An unclaimed or not-yet-configured frame
  gets a rendered instruction placeholder (with a claim QR) instead of
@@ -126,8 +138,9 @@ Pages: `/` (routing hub), `/setup`, `/login`, `/claim`, `/settings`,
  *this* frame and 302s to it. Authenticated by the frame's own
  `manage_token` (see the manage QR below), not device credentials -- a
  phone scanning the QR has no way to supply `?id=`/`?token=`.
- `GET /frame/face-labels` -- up to 4 named faces with 800x480
-  positions, flattened (`name_0`/`x_0`/`y_0`, ...) for the device's
+- `GET /frame/face-labels` -- up to 4 named faces with positions in the
+  frame's own panel space (800x480 for the 7.3" panel, 1600x1200 for the
+  13.3"), flattened (`name_0`/`x_0`/`y_0`, ...) for the device's
  flat-scalar parser.
 - `POST /frame/battery` -- `{"percent": 0-100}`; per-discharge-cycle
  history (feeds the runtime estimate) plus a permanent per-frame
@@ -206,9 +219,9 @@ Pages: `/` (routing hub), `/setup`, `/login`, `/claim`, `/settings`,
  scan-to-download QR both use the frame's own `manage_token` (device
  tokens don't work for either -- neither is ever called by firmware,
  both are opened by a phone that has no way to supply `?id=`/`?token=`),
-  and `MANAGEMENT_TOKEN` survives only as the migration credential for
-  pre-multi-frame firmware.
- Calendar frame mode (`app/calendar_feed.py`) expands recurring events
+  and `MANAGEMENT_TOKEN` is only ever the pre-setup claim gate (see
+  step 5 above).
+- The calendar widget (`app/calendar_feed.py`) expands recurring events
  (RRULE/EXDATE/DST) via [`recurring-ical-events`](https://pypi.org/project/recurring-ical-events/),
  which is LGPL-3.0-or-later -- the only non-permissively-licensed
  dependency here. It's used as an ordinary `pip install` runtime import,
@@ -226,7 +239,7 @@ Pages: `/` (routing hub), `/setup`, `/login`, `/claim`, `/settings`,
  explicit, informed call by the project owner, not a default -- anyone
  redistributing this project (vs. just self-hosting it) should
  re-evaluate that tradeoff for their own situation before doing so.
- Whiteboard frame mode (`app/webdav_client.py`, `app/whiteboard.py`)
+- The whiteboard widget (`app/webdav_client.py`, `app/whiteboard.py`)
  fetches a Nextcloud Whiteboard (or any WebDAV server's) `.whiteboard`
  file -- which turns out to be Excalidraw scene JSON (elements/appState/
  files), not an image -- and renders it via `render-service/`, a small
@@ -1,14 +1,18 @@
-"""Authentication: password hashing, user sessions + CSRF, the legacy
-shared-token gate, and device resolution.
+"""Authentication: password hashing, user sessions + CSRF, the pre-setup
+claim gate, and device resolution.

 Three independent credential classes:
 - User sessions (cookie "session", server-side sessions table, per-
  session CSRF token required on mutating requests) -- humans.
- The legacy shared MANAGEMENT_TOKEN (env-only). Still accepted on
-  browser routes so the deployed frame's on-panel manage QR (which
-  embeds ?token=) keeps working until Phase C replaces it with the
-  limited /m/ page; CSRF doesn't apply to it (it's explicit per-request
-  credential, not an ambient cookie a cross-site request could ride).
+- MANAGEMENT_TOKEN (env-only, optional). Only meaningful before any user
+  account exists yet (fresh install, or freshly migrated, before
+  /setup has been run): if set, it gates who gets to be the one to run
+  /setup and claim the first admin account; once a user exists, sessions
+  are the only way in. Not a standing bearer credential -- the on-panel
+  manage QR now embeds a frame's own per-frame manage_token (/m/, see
+  routers/manage.py) rather than this shared one; CSRF doesn't apply to
+  it either way (it's an explicit per-request credential, not an ambient
+  cookie a cross-site request could ride).
 - Device credentials (?id= + ?token=, see require_device below).
 """

@@ -250,17 +254,16 @@ def require_frame_control(


 def management_token() -> str:
-    """The legacy shared secret. Env-only, never stored -- same as the old
-    server, where the env var overrode anything on disk on every load."""
+    """The pre-setup claim-gate secret. Env-only, never stored -- same as
+    the old server, where the env var overrode anything on disk on every
+    load."""
    return os.environ.get("MANAGEMENT_TOKEN", "")


 def browser_token_valid(request: Request) -> bool:
-    """The legacy shared-token check. No MANAGEMENT_TOKEN configured means
-    token-holders don't exist -- but unlike Phase A this no longer means
-    "open": once users exist, sessions are the primary gate and this is
-    only the compatibility path for the deployed frame's manage QR
-    (?token=) until Phase C. Empty token => not valid (sessions rule)."""
+    """Whether the request carries the current MANAGEMENT_TOKEN, via
+    query param or cookie. Only meaningful pre-setup (see require_browser
+    below) -- empty configured token => not valid (nothing to match)."""
    token = management_token()
    if not token:
        return False
@@ -270,12 +273,12 @@ def browser_token_valid(request: Request) -> bool:

 def require_browser(request: Request, db: Session = Depends(get_db)) -> User | None:
    """Dependency for the web UI's /api/* routes: a real user session
-    (CSRF-checked on mutations, returns the User), or the legacy shared
-    token (returns None -- token bearers act as an anonymous operator,
-    exactly the pre-user model). While NO users exist yet (fresh install
-    or freshly migrated, before /setup has been run) the API stays open
-    if no MANAGEMENT_TOKEN is set -- the Phase A/legacy behavior --
-    since there's nobody to log in as yet."""
+    (CSRF-checked on mutations, returns the User). While NO users exist
+    yet (fresh install, or freshly migrated, before /setup has been run)
+    the API instead stays open if no MANAGEMENT_TOKEN is set, or opens
+    to whoever supplies it if one is -- there's nobody to log in as yet,
+    so this is purely the claim gate for who gets to run /setup. Once a
+    user exists, only a session gets in."""
    session = current_session(request, db)
    if session is not None:
        if request.method not in ("GET", "HEAD", "OPTIONS") and not _csrf_ok(request, session):
@@ -283,10 +286,9 @@ def require_browser(request: Request, db: Session = Depends(get_db)) -> User | N
        user = db.get(User, session.user_id)
        if user is not None:
            return user
-    if browser_token_valid(request):
-        return None
-    if not users_exist(db) and not management_token():
-        return None
+    if not users_exist(db):
+        if not management_token() or browser_token_valid(request):
+            return None
    raise HTTPException(401, "Not logged in")


@@ -326,63 +328,29 @@ def _register_frame(db: Session, device_id: str) -> Frame:

 def require_device(request: Request, db: Session = Depends(get_db)) -> Frame:
    """Resolves and authenticates the frame behind a /frame/* request.
-
-    New firmware sends ?id=<12-hex-mac>&token=<per-frame device token>.
-    Deployed legacy firmware sends only ?token=<shared MANAGEMENT_TOKEN>
-    (or nothing, on an open server) -- those requests resolve to the
-    unique legacy_token_enabled frame for as long as that migration
-    window stays open. The first id-bearing request arriving with legacy
-    credentials while the legacy frame has no device_id yet BINDS that id
-    to it -- that's the moment the deployed frame comes back up on new
-    firmware after its OTA, and it must not register as a second frame.
-    """
+    Firmware sends ?id=<12-hex-mac>&token=<per-frame device token>."""
    device_id = request.query_params.get("id", "").strip().lower()
    token = request.query_params.get("token", "")
-    legacy = management_token()
-    legacy_ok = not legacy or token == legacy

-    if device_id:
-        frame = db.scalars(select(Frame).where(Frame.device_id == device_id)).first()
-        if frame is None:
-            legacy_frame = db.scalars(
-                select(Frame).where(Frame.legacy_token_enabled == True)  # noqa: E712
-            ).first()
-            if legacy_frame is not None and legacy_frame.device_id is None and legacy_ok:
-                legacy_frame.device_id = device_id
-                frame = legacy_frame
-                logger.info("Bound device id %s to legacy frame #%d", device_id, frame.id)
-            else:
-                frame = _register_frame(db, device_id)
-        else:
-            token_ok = bool(token) and token == frame.device_token
-            if token_ok and not frame.device_token_ack:
-                frame.device_token_ack = True
-                logger.info("Frame #%d acknowledged its device token", frame.id)
-            if not token_ok:
-                if frame.legacy_token_enabled and legacy_ok:
-                    pass
-                elif not frame.device_token_ack:
-                    # Handshake window: the device registered but hasn't
-                    # received its token yet (the wake cycle fetches the
-                    # image BEFORE polling /frame/config, where the token
-                    # is delivered) -- the id stays the credential, same
-                    # trust level as the open registration that created
-                    # the row. Closes permanently on the first
-                    # authenticated request.
-                    pass
-                else:
-                    raise HTTPException(401, "Missing or invalid access token")
+    if not device_id:
+        raise HTTPException(401, "Missing device id")
+
+    frame = db.scalars(select(Frame).where(Frame.device_id == device_id)).first()
+    if frame is None:
+        frame = _register_frame(db, device_id)
    else:
-        if not legacy_ok:
+        token_ok = bool(token) and token == frame.device_token
+        if token_ok and not frame.device_token_ack:
+            frame.device_token_ack = True
+            logger.info("Frame #%d acknowledged its device token", frame.id)
+        elif not token_ok and frame.device_token_ack:
            raise HTTPException(401, "Missing or invalid access token")
-        frame = db.scalars(
-            select(Frame).where(Frame.legacy_token_enabled == True)  # noqa: E712
-        ).first()
-        if frame is None:
-            # Nothing to resolve a no-id request to. migration.py always
-            # creates frame #1 at startup, so this only happens if it was
-            # deleted -- treat like an unknown device.
-            raise HTTPException(401, "No frame accepts legacy credentials")
+        # else: handshake window -- the device registered but hasn't
+        # received its token yet (the wake cycle fetches the image
+        # BEFORE polling /frame/config, where the token is delivered) --
+        # the id stays the credential, same trust level as the open
+        # registration that created the row. Closes permanently on the
+        # first authenticated request.

    frame.last_seen = time.time()
    db.commit()
@@ -0,0 +1,347 @@
+"""Calendar widget's "modern" render style -- all four view modes
+(agenda/today_tomorrow/week/month), mirroring calendar_render.py's own
+_build dispatch shape exactly so app/widgets/calendar.py and the
+calendar preview endpoint can call either module identically. Kept in
+its own module rather than joining app/html_render.py's other build_*
+functions, mirroring calendar_render.py's own separation from the
+simpler widgets (calendar is the one case where html_render.py growing
+a 5th unrelated builder starts to hurt readability).
+
+Reuses calendar_render's own private helpers (_events_on_day/_event_
+colors/_event_start/_fmt_time/_weather_for_day/_month_view_fits/
+_add_months) so a modern-style view's event list/colors/times/weather/
+month-grid math match the classic renderer's data exactly -- only the
+drawing differs, same relationship weather's build_current/build_daily
+have with weather_render.py."""
+
+from __future__ import annotations
+
+import calendar as calendar_module
+from datetime import date, datetime, timedelta
+from zoneinfo import ZoneInfo
+
+from PIL import Image
+
+from . import html_render, panel_style, theme_tokens
+from .calendar_render import (
+    MARGIN,
+    WEEKDAY_NAMES,
+    _add_months,
+    _event_colors,
+    _event_start,
+    _events_on_day,
+    _fmt_time,
+    _month_view_fits,
+    _weather_for_day,
+)
+
+
+def _weather_row(weather_cities, day, units) -> list[dict]:
+    entries = _weather_for_day(weather_cities, day)
+    return [
+        {"emoji": html_render.CATEGORY_EMOJI.get(e["category"], ""), "high": round(e["high"]), "low": round(e["low"])}
+        for e in entries
+    ]
+
+
+def _day_section_data(day: date, events: list[dict], tz: ZoneInfo, palette_rgb, weather_cities,
+                      weather_units: str, owners_seen: list[str], rows_avail_h: int, row_h: int) -> dict:
+    """One day's {header, weather_entries, rows, more_count} -- shared by
+    build_agenda/build_today_tomorrow/build_week's vertical layout, same
+    reuse relationship calendar_render._draw_agenda_day has with
+    _build_agenda/_build_today_tomorrow. `rows_avail_h` is the *rows*
+    area's own pixel budget only -- the caller has already reserved a
+    separate, uniform header_h (which is where weather actually renders,
+    see the day-header macro) for every section, so this function
+    doesn't need to account for weather space itself."""
+    header = day.strftime("%A, %B ") + str(day.day)
+    weather_entries = _weather_row(weather_cities, day, weather_units)
+    max_rows = max(0, rows_avail_h // row_h)
+
+    day_events = _events_on_day(events, day, tz)
+    rows = []
+    for event in day_events[:max_rows]:
+        colors = _event_colors(event, owners_seen, palette_rgb)
+        time_str = "All day" if event["all_day"] else _fmt_time(_event_start(event, tz))
+        rows.append({"colors": [html_render._rgb_to_hex(c) for c in colors], "time": time_str,
+                     "summary": event["summary"]})
+    return {"header": header, "weather_entries": weather_entries, "rows": rows,
+            "more_count": max(0, len(day_events) - max_rows)}
+
+
+def build_agenda(events: list[dict], browse_offset: int, target_w: int, target_h: int, tz: ZoneInfo,
+                 palette_rgb: list | None = None, weather_cities: list[dict] | None = None,
+                 weather_units: str = "fahrenheit", theme_name: str | None = None,
+                 font_scale: float = 1.0) -> Image.Image:
+    """HTML/CSS-rendered analogue of calendar_render._build_agenda.
+
+    Bold-minimal: no card/border/shadow (theme["radius"]/theme["shadow"]
+    are unused, same carve-out as weather's build_current/build_daily --
+    see docs/widgets.md). The day header is plain ink text under a slim
+    accent-colored rule instead of white text on a full gradient band --
+    only that thin rule dithers at the theme's richer accent_amplitude
+    now, not the header text sitting on top of it, which is a legibility
+    improvement over the old design, not just a visual one."""
+    theme = theme_tokens.resolve_theme(theme_name, "calendar", palette_rgb)
+    day = datetime.now(tz).date() + timedelta(days=browse_offset)
+    title_size = panel_style.scaled_size(max(14, min(target_w, target_h) // 12), font_scale)
+    body_size = panel_style.scaled_size(max(11, min(target_w, target_h) // 20), font_scale)
+    weather_size = max(10, body_size - 2)
+    row_h = body_size + 14
+    unit_suffix = "F" if weather_units == "fahrenheit" else "C"
+    accent_h = round(html_render._clamp(min(target_w, target_h) * 0.025, 4, 8))
+
+    # Single day -- no cross-section alignment concern, so header_h can
+    # simply reflect whether THIS day actually has weather (unlike
+    # build_today_tomorrow/build_week's vertical layout, which must
+    # reserve the same header_h for every stacked section regardless).
+    has_weather = bool(_weather_row(weather_cities, day, weather_units))
+    header_h = accent_h + 10 + title_size + ((weather_size + 10) if has_weather else 0)
+
+    owners_seen: list[str] = []
+    data = _day_section_data(day, events, tz, palette_rgb, weather_cities, weather_units, owners_seen,
+                             target_h - header_h - MARGIN, row_h)
+
+    template = html_render._jinja_env.get_template("calendar_agenda.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, gutter=panel_style.GUTTER,
+        font_regular=theme["font_regular"], font_bold=theme["font_bold"],
+        header=data["header"], title_size=title_size, header_h=header_h, accent_h=accent_h,
+        accent_start=theme["accent_hex"], weather_entries=data["weather_entries"],
+        weather_size=weather_size, unit_suffix=unit_suffix, rows=data["rows"],
+        more_count=data["more_count"], row_h=row_h, body_size=body_size,
+    )
+    rendered = html_render.render_html_to_image(html, target_w, target_h)
+    gutter = panel_style.GUTTER
+    accent_rect = (gutter, gutter, target_w - gutter, gutter + accent_h)
+    return html_render.ordered_dither_regions(
+        rendered, palette_rgb, accent_regions=[(accent_rect, theme["accent_amplitude"])]
+    )
+
+
+def build_today_tomorrow(events: list[dict], browse_offset: int, target_w: int, target_h: int, tz: ZoneInfo,
+                         palette_rgb: list | None = None, weather_cities: list[dict] | None = None,
+                         weather_units: str = "fahrenheit", theme_name: str | None = None,
+                         font_scale: float = 1.0) -> Image.Image:
+    """HTML/CSS-rendered analogue of calendar_render._build_today_tomorrow
+    -- two day-sections stacked (see _day_section_data). Bold-minimal, no
+    card (see build_agenda's docstring) -- each section's own slim accent
+    rule dithers richer via ordered_dither_regions, not its header text."""
+    theme = theme_tokens.resolve_theme(theme_name, "calendar", palette_rgb)
+    start_day = datetime.now(tz).date() + timedelta(days=browse_offset)
+    section_h = target_h // 2
+    title_size = panel_style.scaled_size(max(13, section_h // 8), font_scale)
+    body_size = panel_style.scaled_size(max(10, min(target_w, target_h) // 26), font_scale)
+    weather_size = max(9, body_size - 2)
+    row_h = body_size + 12
+    unit_suffix = "F" if weather_units == "fahrenheit" else "C"
+    accent_h = round(html_render._clamp(min(target_w, target_h) * 0.02, 3, 6))
+
+    day_dates = [start_day + timedelta(days=i) for i in range(2)]
+    # Uniform across both stacked sections regardless of which day(s)
+    # actually have weather -- see _day_section_data's own docstring for
+    # why a per-day header height misaligns where rows start.
+    any_weather = any(_weather_row(weather_cities, d, weather_units) for d in day_dates)
+    header_h = accent_h + 8 + title_size + ((weather_size + 8) if any_weather else 0)
+
+    owners_seen: list[str] = []
+    days = [
+        _day_section_data(d, events, tz, palette_rgb, weather_cities, weather_units, owners_seen,
+                          section_h - header_h, row_h)
+        for d in day_dates
+    ]
+
+    template = html_render._jinja_env.get_template("calendar_today_tomorrow.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, gutter=panel_style.GUTTER,
+        font_regular=theme["font_regular"], font_bold=theme["font_bold"],
+        days=days, title_size=title_size, header_h=header_h, accent_h=accent_h,
+        accent_start=theme["accent_hex"], weather_size=weather_size,
+        unit_suffix=unit_suffix, row_h=row_h, body_size=body_size,
+    )
+    rendered = html_render.render_html_to_image(html, target_w, target_h)
+    gutter = panel_style.GUTTER
+    accent_regions = [
+        ((gutter, gutter + i * section_h, target_w - gutter, gutter + i * section_h + accent_h),
+         theme["accent_amplitude"])
+        for i in range(len(days))
+    ]
+    return html_render.ordered_dither_regions(rendered, palette_rgb, accent_regions=accent_regions)
+
+
+def build_week(events: list[dict], browse_offset: int, target_w: int, target_h: int, tz: ZoneInfo,
+              week_start: int, palette_rgb: list | None = None, weather_cities: list[dict] | None = None,
+              weather_units: str = "fahrenheit", days: int = 7, layout: str = "horizontal",
+              start_offset: int = 0, theme_name: str | None = None, font_scale: float = 1.0) -> Image.Image:
+    """HTML/CSS-rendered analogue of calendar_render._build_week -- both
+    the vertical (stacked day-sections, reusing build_today_tomorrow's
+    template with an arbitrary day count) and horizontal (side-by-side
+    columns) layouts. Each header (per-section or per-column) dithers
+    richer via ordered_dither_regions."""
+    theme = theme_tokens.resolve_theme(theme_name, "calendar", palette_rgb)
+    gutter = panel_style.GUTTER
+    today = datetime.now(tz).date()
+    if days == 7:
+        days_since_start = (today.weekday() - week_start) % 7
+        week_first_day = today - timedelta(days=days_since_start) + timedelta(days=days * browse_offset)
+    else:
+        week_first_day = today + timedelta(days=start_offset) + timedelta(days=days * browse_offset)
+    unit_suffix = "F" if weather_units == "fahrenheit" else "C"
+    owners_seen: list[str] = []
+
+    if layout == "vertical":
+        section_h = target_h // days
+        title_size = panel_style.scaled_size(max(11, min(20, section_h // 6)), font_scale)
+        body_size = panel_style.scaled_size(max(9, min(target_w, target_h) // (18 + days)), font_scale)
+        weather_size = max(8, body_size - 2)
+        row_h = body_size + 10
+        accent_h = round(html_render._clamp(min(target_w, target_h) * 0.018, 3, 5))
+        day_dates = [week_first_day + timedelta(days=i) for i in range(days)]
+        # Uniform across all `days` stacked sections -- see
+        # _day_section_data's own docstring for why a per-day header
+        # height misaligns where rows start.
+        any_weather = any(_weather_row(weather_cities, d, weather_units) for d in day_dates)
+        header_h = accent_h + 6 + title_size + ((weather_size + 6) if any_weather else 0)
+        day_sections = [
+            _day_section_data(d, events, tz, palette_rgb, weather_cities, weather_units, owners_seen,
+                             section_h - header_h, row_h)
+            for d in day_dates
+        ]
+        template = html_render._jinja_env.get_template("calendar_today_tomorrow.html.jinja")
+        html = template.render(
+            w=target_w, h=target_h, gutter=gutter,
+            font_regular=theme["font_regular"], font_bold=theme["font_bold"],
+            days=day_sections, title_size=title_size, header_h=header_h, accent_h=accent_h,
+            accent_start=theme["accent_hex"], weather_size=weather_size,
+            unit_suffix=unit_suffix, row_h=row_h, body_size=body_size,
+        )
+        rendered = html_render.render_html_to_image(html, target_w, target_h)
+        accent_regions = [
+            ((gutter, gutter + i * section_h, target_w - gutter, gutter + i * section_h + accent_h),
+             theme["accent_amplitude"])
+            for i in range(len(day_sections))
+        ]
+        return html_render.ordered_dither_regions(rendered, palette_rgb, accent_regions=accent_regions)
+
+    header_size = panel_style.scaled_size(max(10, min(16, (target_w // days) // 6)), font_scale)
+    chip_size = max(9, header_size - 3)
+    weather_size = max(8, chip_size - 1)
+    col_w = max(1, (target_w - panel_style.GUTTER * 2) // days)
+    row_h = chip_size + 8
+    accent_h = round(html_render._clamp(min(target_w, target_h) * 0.02, 3, 6))
+    # Reserve weather-line room in every column's header uniformly
+    # (whether or not THIS specific day has a cached forecast) -- a
+    # per-column height that depends on that day's own data would
+    # misalign where each column's event rows start across the week
+    # grid the moment any single day lacks a forecast entry.
+    header_h = header_size + 8 + (weather_size + 4 if weather_cities else 0)
+    max_rows = max(0, (target_h - panel_style.GUTTER * 2 - accent_h - 6 - header_h) // row_h)
+
+    cols = []
+    for i in range(days):
+        day = week_first_day + timedelta(days=i)
+        label = day.strftime("%a %-d") if day != today else f"★ {day.strftime('%a %-d')}"
+        weather_entries = _weather_row(weather_cities, day, weather_units)
+        day_events = _events_on_day(events, day, tz)
+        rows = []
+        for event in day_events[:max_rows]:
+            color = html_render._rgb_to_hex(_event_colors(event, owners_seen, palette_rgb)[0])
+            summary = event["summary"] if event["all_day"] else f"{_fmt_time(_event_start(event, tz))[:-3]} {event['summary']}"
+            rows.append({"color": color, "summary": summary})
+        cols.append({
+            "label": label, "weather": weather_entries[0] if weather_entries else None,
+            "rows": rows, "more_count": max(0, len(day_events) - max_rows),
+        })
+
+    template = html_render._jinja_env.get_template("calendar_week_horizontal.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, gutter=gutter,
+        font_regular=theme["font_regular"], font_bold=theme["font_bold"],
+        cols=cols, header_size=header_size, chip_size=chip_size,
+        header_h=header_h, accent_h=accent_h, weather_size=weather_size, unit_suffix=unit_suffix,
+        accent_start=theme["accent_hex"],
+    )
+    rendered = html_render.render_html_to_image(html, target_w, target_h)
+    accent_rect = (gutter, gutter, target_w - gutter, gutter + accent_h)
+    return html_render.ordered_dither_regions(rendered, palette_rgb, accent_regions=[(accent_rect, theme["accent_amplitude"])])
+
+
+def build_month(events: list[dict], browse_offset: int, target_w: int, target_h: int, tz: ZoneInfo,
+               week_start: int, palette_rgb: list | None = None, theme_name: str | None = None,
+               font_scale: float = 1.0) -> Image.Image:
+    """HTML/CSS-rendered analogue of calendar_render._build_month --
+    density dots per day, not literal event text, same reasoning as the
+    classic renderer (real text at typical month-cell size is close to
+    unreadable on a 6-color dithered e-ink panel). The per-owner event
+    dots are identity-coding (like every other calendar view's chips) and
+    are never touched by a theme.
+
+    Bold-minimal: no card (see build_agenda's docstring); the old flat
+    accent-colored weekday-name band is now a slim accent rule above
+    plain bold weekday labels, matching every other calendar view's
+    header treatment -- only that rule dithers at the theme's richer
+    accent_amplitude via ordered_dither_regions. "Today" is still called
+    out with a small accent-filled pill around its day number (a
+    genuinely small accent surface, not a band, so it was left alone)."""
+    theme = theme_tokens.resolve_theme(theme_name, "calendar", palette_rgb)
+    gutter = panel_style.GUTTER
+    today = datetime.now(tz).date()
+    target_month = _add_months(date(today.year, today.month, 1), browse_offset)
+    weeks_dates = list(
+        calendar_module.Calendar(firstweekday=week_start).monthdatescalendar(target_month.year, target_month.month)
+    )
+    day_names = [n[:3] for n in (WEEKDAY_NAMES[week_start:] + WEEKDAY_NAMES[:week_start])]
+
+    header_size = panel_style.scaled_size(max(11, min(16, target_h // 30)), font_scale)
+    day_size = panel_style.scaled_size(max(10, min(15, target_w // 55)), font_scale)
+    dot_size = max(4, day_size // 2)
+    accent_h = round(html_render._clamp(min(target_w, target_h) * 0.02, 3, 6))
+
+    owners_seen: list[str] = []
+    weeks = []
+    for week in weeks_dates:
+        row = []
+        for day in week:
+            day_events = _events_on_day(events, day, tz)
+            dots = [html_render._rgb_to_hex(_event_colors(e, owners_seen, palette_rgb)[0]) for e in day_events[:4]]
+            row.append({
+                "day_num": day.day, "in_month": day.month == target_month.month,
+                "is_today": day == today, "dots": dots, "more_count": max(0, len(day_events) - 4),
+            })
+        weeks.append(row)
+
+    template = html_render._jinja_env.get_template("calendar_month.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, gutter=gutter,
+        font_regular=theme["font_regular"], font_bold=theme["font_bold"],
+        day_names=day_names, weeks=weeks, accent_h=accent_h,
+        header_size=header_size, day_size=day_size, dot_size=dot_size, accent_start=theme["accent_hex"],
+    )
+    rendered = html_render.render_html_to_image(html, target_w, target_h)
+    accent_rect = (gutter, gutter, target_w - gutter, gutter + accent_h)
+    return html_render.ordered_dither_regions(rendered, palette_rgb,
+                                              accent_regions=[(accent_rect, theme["accent_amplitude"])])
+
+
+def build(events: list[dict], view: str, browse_offset: int, target_w: int, target_h: int, tz: ZoneInfo,
+         week_start: int, palette_rgb: list | None = None, weather_cities: list[dict] | None = None,
+         weather_units: str = "fahrenheit", week_days: int = 7, week_layout: str = "horizontal",
+         week_start_offset: int = 0, theme_name: str | None = None, font_scale: float = 1.0) -> Image.Image:
+    """Dispatches to the right build_* -- mirrors calendar_render._build's
+    exact "month falls back to agenda when it doesn't fit" resolution, so
+    a narrow month-mode widget set to modern style still gets a sensible
+    modern view instead of erroring or silently reverting to classic."""
+    effective_view = view
+    if view == "month" and not _month_view_fits(target_w, target_h):
+        effective_view = "agenda"
+
+    if effective_view == "agenda":
+        return build_agenda(events, browse_offset, target_w, target_h, tz, palette_rgb, weather_cities,
+                            weather_units, theme_name, font_scale)
+    if effective_view == "today_tomorrow":
+        return build_today_tomorrow(events, browse_offset, target_w, target_h, tz, palette_rgb, weather_cities,
+                                    weather_units, theme_name, font_scale)
+    if effective_view == "week":
+        return build_week(events, browse_offset, target_w, target_h, tz, week_start, palette_rgb, weather_cities,
+                          weather_units, week_days, week_layout, week_start_offset, theme_name, font_scale)
+    return build_month(events, browse_offset, target_w, target_h, tz, week_start, palette_rgb, theme_name, font_scale)
@@ -11,7 +11,7 @@ Event dicts here are calendar_feed.py's shape: {"summary", "start", "end"
 (ISO 8601 strings), "all_day", "sources": [{"owner_display_name",
 "color_index"}, ...]} -- more than one entry in "sources" means
 merge_events collapsed several calendars' identical (same title/time)
-events into one, see _event_colors/_draw_color_bar below.
+events into one, see _event_colors/panel_style.draw_color_chip below.
 """

 from __future__ import annotations
@@ -26,8 +26,11 @@ from zoneinfo import ZoneInfo

 from PIL import Image, ImageDraw, ImageFont

+from . import panel_style
 from .image_pipeline import (
    DEFAULT_PALETTE_RGB,
+    EPD_HEIGHT,
+    EPD_WIDTH,
    _apply_manage_overlay,
    _quantize,
    _transpose_and_pack,
@@ -42,12 +45,20 @@ CALENDAR_VIEW_LABELS = {"agenda": "Agenda (today)", "today_tomorrow": "Agenda (t
                        "week": "Week", "month": "Month"}
 WEEKDAY_NAMES = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

-MARGIN = 20
+# MARGIN carries panel_style.CONTENT_MARGIN's value unchanged (not
+# re-tuned). BG/FG are this module's own plain black/white -- checkbox
+# outlines, month-view grid hairlines -- not a text-emphasis concern (no
+# MUTED gray here anymore -- see panel_style's module docstring for why:
+# a mid-gray fill has no close palette match and dithers into speckle
+# once the whole canvas is quantized. Secondary text now reads through
+# size/weight alone, always exact black).
+MARGIN = panel_style.CONTENT_MARGIN
 BG = (255, 255, 255)
 FG = (0, 0, 0)
-MUTED = (110, 110, 110)
-# Was a light gray, but that dithers away to near-invisible once quantized
-# to the 6-color e-ink palette -- black reads as an actual line on-panel.
+# Structural dividers/grid lines (between stacked day sections, week
+# columns, month cells) stay a plain black rule -- gray dithers away to
+# near-invisible once quantized to the 6-color e-ink palette. Headers
+# no longer use this: see panel_style.draw_header_bar/theme_color.
 RULE = (0, 0, 0)

 # Fallback for any event whose calendar has no manually pinned color
@@ -67,7 +78,7 @@ def _event_colors(event: dict, owners_seen: list[str], palette_rgb: list | None)
    one person's calendar). Usually just one color; more than one is
    what tells the "same event, more than one calendar" case apart from
    an ordinary single-calendar event at render time -- see
-    _draw_color_bar. Each source's own manually pinned color
+    panel_style.draw_color_chip. Each source's own manually pinned color
    (FrameCalendar.color_index -- see routers/api_widgets.py's
    api_widget_calendar_color) resolves against whichever palette this frame
    actually renders with, so a pinned "Blue" stays this frame's actual
@@ -91,24 +102,6 @@ def _event_colors(event: dict, owners_seen: list[str], palette_rgb: list | None)
    return colors


-def _draw_color_bar(draw: ImageDraw.ImageDraw, x0: int, y0: int, x1: int, y1: int,
-                    colors: list[tuple[int, int, int]], radius: int) -> None:
-    """One rounded bar for a single-source event, or that same overall
-    footprint split into equal-width side-by-side segments -- one per
-    contributing calendar -- for a deduplicated shared event (see
-    _event_colors/calendar_feed.merge_events). Splitting rather than
-    e.g. concentric rings keeps every color equally "thick and bold" at
-    a glance, the same design goal a single pinned color already has."""
-    if len(colors) == 1:
-        draw.rounded_rectangle([x0, y0, x1, y1], radius=radius, fill=colors[0])
-        return
-    seg_w = (x1 - x0) / len(colors)
-    for i, color in enumerate(colors):
-        seg_x0 = round(x0 + i * seg_w)
-        seg_x1 = round(x0 + (i + 1) * seg_w) - (2 if i < len(colors) - 1 else 0)
-        draw.rectangle([seg_x0, y0, seg_x1, y1], fill=color)
-
-
 def _event_start(event: dict, tz: ZoneInfo) -> datetime | date:
    """Parses event["start"] and, for timed events, converts to `tz` --
    calendar_feed.py stores whatever timezone each source event carried
@@ -158,11 +151,12 @@ def _fmt_task_due(due: str | None) -> str:
    return d.strftime("%b %-d")


-# ImageFont.load_default() (used for everything else in this module --
-# see the module docstring) has no emoji glyphs, and PIL/FreeType don't
-# skip an unsupported codepoint, they substitute a ".notdef" tofu box (a
-# visible filled rectangle) -- reads as a rendering glitch, not "emoji
-# not supported". So event titles get drawn with two fonts: the normal
+# Neither Inter (panel_style.font_bold/font_regular, this module's own
+# body/title font -- see MARGIN/BG/FG comment above) nor PIL's bundled
+# default font has emoji glyphs, and PIL/FreeType don't skip an
+# unsupported codepoint, they substitute a ".notdef" tofu box (a visible
+# filled rectangle) -- reads as a rendering glitch, not "emoji not
+# supported". So event titles get drawn with two fonts: the normal
 # text font for everything else, and one of these for actual emoji runs
 # (see _split_emoji_runs/_draw_mixed_line) -- both Noto Emoji, OFL-1.1,
 # vendored at app/fonts/ (license alongside at app/fonts/OFL.txt).
@@ -401,15 +395,17 @@ def _draw_agenda_day(img: Image.Image, draw: ImageDraw.ImageDraw, day: date, eve
    these vertically without duplicating the row-layout/truncation
    logic. Weather is drawn above the event list -- eating into the same
    row budget the event count is truncated against, exactly like the
-    header/rule above it already does."""
+    header bar above it already does."""
    x0, y0, w, h = region
-    text_x0, text_y0 = x0 + MARGIN, y0 + MARGIN
+    header_h = title_font.size + 20
+    panel_style.draw_header_bar(draw, (x0, y0, w, header_h), header_h,
+                                panel_style.theme_color("calendar", palette_rgb))
+    text_x0 = x0 + MARGIN
    text_w = w - MARGIN * 2
    header = day.strftime("%A, %B ") + str(day.day)
-    draw_text(img, (text_x0, text_y0), _truncate_to_width(draw, header, title_font, text_w), title_font)
-    y = text_y0 + title_font.size + 12
-    draw.line([(text_x0, y), (text_x0 + text_w, y)], fill=RULE)
-    y += 12
+    draw_text(img, (text_x0, y0 + (header_h - title_font.size) // 2),
+             _truncate_to_width(draw, header, title_font, text_w), title_font, BG)
+    y = y0 + header_h + 12

    weather_entries = _weather_for_day(weather_cities, day)
    if weather_entries:
@@ -422,13 +418,13 @@ def _draw_agenda_day(img: Image.Image, draw: ImageDraw.ImageDraw, day: date, eve
    max_rows = max(0, (y0 + h - MARGIN - y) // row_h)

    if not day_events:
-        draw_text(img, (text_x0, y), "Nothing scheduled", body_font, MUTED)
+        draw_text(img, (text_x0, y), "Nothing scheduled", body_font)
    for i, event in enumerate(day_events):
        if i >= max_rows:
-            draw_text(img, (text_x0, y), f"+{len(day_events) - max_rows} more", body_font, MUTED)
+            draw_text(img, (text_x0, y), f"+{len(day_events) - max_rows} more", body_font)
            break
        colors = _event_colors(event, owners_seen, palette_rgb)
-        _draw_color_bar(draw, text_x0, y + 2, text_x0 + 10, y + row_h - 7, colors, radius=3)
+        panel_style.draw_color_chip(draw, text_x0, y + 2, text_x0 + 10, y + row_h - 7, colors)
        time_str = "All day" if event["all_day"] else _fmt_time(_event_start(event, tz))
        prefix = f"{time_str}  "
        draw_text(img, (text_x0 + 18, y), prefix, body_font)
@@ -445,13 +441,13 @@ def _draw_tasks(img: Image.Image, draw: ImageDraw.ImageDraw, region: tuple[int,
    (`title`, truncated to fit -- TaskWidgetConfig.name or the "Tasks"
    default; the only widget type with its own on-panel title, since
    it's the only one where "which list is this" isn't obvious from its
-    content the way a calendar/photo/whiteboard's is), then a color bar
-    (reusing _event_colors/_draw_color_bar as-is: a task dict's
-    top-level owner_display_name/color_index is exactly _event_colors'
-    single-source fallback shape, since caldav_client.merge_tasks
-    doesn't cross-list-dedup tasks into a "sources" list the way
-    merge_events dedups events) + checkbox glyph + due date (if any) +
-    summary per task, same header/rule/row-cap/truncation shape as
+    content the way a calendar/photo/whiteboard's is), then a color chip
+    (reusing _event_colors/panel_style.draw_color_chip as-is: a task
+    dict's top-level owner_display_name/color_index is exactly
+    _event_colors' single-source fallback shape, since caldav_client.
+    merge_tasks doesn't cross-list-dedup tasks into a "sources" list the
+    way merge_events dedups events) + checkbox glyph + due date (if any)
+    + summary per task, same header/row-cap/truncation shape as
    _draw_agenda_day's event list so the standalone tasks widget (see
    _build_tasks) reads as the same consistent design as everything
    else on-panel, not a bolted-together look. Reuses _draw_mixed_line
@@ -460,45 +456,52 @@ def _draw_tasks(img: Image.Image, draw: ImageDraw.ImageDraw, region: tuple[int,

    Outstanding tasks get an empty checkbox; completed ones (only ever
    present when TaskWidgetConfig.show_completed is on -- see
-    caldav_client.fetch_tasks' completed_since) get a filled one and
-    muted text, no due-date prefix (irrelevant once done)."""
+    caldav_client.fetch_tasks' completed_since) get a filled checkbox in
+    this widget's own Green accent (see panel_style.THEME) -- that fill
+    is the "done" signal, no due-date prefix (irrelevant once done) and
+    no separate muted text treatment (see module-level MUTED removal
+    note above _event_colors)."""
    x0, y0, w, h = region
-    text_x0, text_y0 = x0 + MARGIN, y0 + MARGIN
+    header_h = title_font.size + 20
+    panel_style.draw_header_bar(draw, (x0, y0, w, header_h), header_h,
+                                panel_style.theme_color("tasks", palette_rgb))
+    text_x0 = x0 + MARGIN
    text_w = w - MARGIN * 2
-    draw_text(img, (text_x0, text_y0), _truncate_to_width(draw, title or "Tasks", title_font, text_w), title_font)
-    y = text_y0 + title_font.size + 12
-    draw.line([(text_x0, y), (text_x0 + text_w, y)], fill=RULE)
-    y += 12
+    draw_text(img, (text_x0, y0 + (header_h - title_font.size) // 2),
+             _truncate_to_width(draw, title or "Tasks", title_font, text_w), title_font, BG)
+    y = y0 + header_h + 12

    row_h = body_font.size + 14
    max_rows = max(0, (y0 + h - MARGIN - y) // row_h)

    if not tasks:
-        draw_text(img, (text_x0, y), "Nothing outstanding", body_font, MUTED)
+        draw_text(img, (text_x0, y), "Nothing outstanding", body_font)
        return
    owners_seen: list[str] = []
+    checkbox_fill = panel_style.theme_color("tasks", palette_rgb)
    for i, task in enumerate(tasks):
        if i >= max_rows:
-            draw_text(img, (text_x0, y), f"+{len(tasks) - max_rows} more", body_font, MUTED)
+            draw_text(img, (text_x0, y), f"+{len(tasks) - max_rows} more", body_font)
            break
        done = task.get("completed_at") is not None
        colors = _event_colors(task, owners_seen, palette_rgb)
-        _draw_color_bar(draw, text_x0, y + 2, text_x0 + 10, y + row_h - 7, colors, radius=3)
+        panel_style.draw_color_chip(draw, text_x0, y + 2, text_x0 + 10, y + row_h - 7, colors)
        box = body_font.size - 6
        box_x = text_x0 + 18
        box_y = y + (row_h - box) // 2 - 5
+        box_r = min(panel_style.CHIP_RADIUS, box // 2)
        if done:
-            draw.rectangle([box_x, box_y, box_x + box, box_y + box], fill=FG)
+            draw.rounded_rectangle([box_x, box_y, box_x + box, box_y + box], radius=box_r, fill=checkbox_fill)
        else:
-            draw.rectangle([box_x, box_y, box_x + box, box_y + box], outline=FG, width=2)
+            draw.rounded_rectangle([box_x, box_y, box_x + box, box_y + box], radius=box_r, outline=FG, width=2)
        text_x = box_x + box + 10
        due_str = None if done else _fmt_task_due(task.get("due"))
        prefix = f"{due_str}  " if due_str else ""
        if prefix:
-            draw_text(img, (text_x, y), prefix, body_font, MUTED)
+            draw_text(img, (text_x, y), prefix, body_font)
        prefix_w = draw.textlength(prefix, font=body_font) if prefix else 0
        _draw_mixed_line(img, draw, (round(text_x + prefix_w), y), task["summary"],
-                         body_font, text_w - (text_x - text_x0) - prefix_w, fill=MUTED if done else FG)
+                         body_font, text_w - (text_x - text_x0) - prefix_w)
        y += row_h


@@ -511,18 +514,19 @@ _AGENDA_FONTS = {"large": (34, 22, 20), "medium": (24, 22, 16), "small": (18, 16

 def _build_agenda(events: list[dict], browse_offset: int, target_w: int, target_h: int, tz: ZoneInfo,
                  palette_rgb: list | None = None, weather_cities: list[dict] | None = None,
-                  weather_units: str = "fahrenheit") -> Image.Image:
-    img = Image.new("RGB", (target_w, target_h), BG)
-    draw = ImageDraw.Draw(img)
+                  weather_units: str = "fahrenheit", font_scale: float = 1.0) -> Image.Image:
+    img, draw, region = panel_style.card_canvas(target_w, target_h)

-    title_size, body_size, weather_size = _AGENDA_FONTS[_size_tier(target_w, target_h)]
-    title_font = ImageFont.load_default(size=title_size)
-    body_font = ImageFont.load_default(size=body_size)
-    weather_font = ImageFont.load_default(size=weather_size)
+    title_size, body_size, weather_size = (
+        panel_style.scaled_size(v, font_scale) for v in _AGENDA_FONTS[_size_tier(target_w, target_h)]
+    )
+    title_font = panel_style.font_bold(title_size)
+    body_font = panel_style.font_regular(body_size)
+    weather_font = panel_style.font_regular(weather_size)

    day = datetime.now(tz).date() + timedelta(days=browse_offset)
    owners_seen: list[str] = []
-    _draw_agenda_day(img, draw, day, events, tz, (0, 0, target_w, target_h), title_font, body_font, owners_seen,
+    _draw_agenda_day(img, draw, day, events, tz, region, title_font, body_font, owners_seen,
                     palette_rgb, weather_cities, weather_font, weather_units)

    return img
@@ -533,30 +537,31 @@ _TODAY_TOMORROW_FONTS = {"large": (26, 18, 16), "medium": (20, 15, 13), "small":

 def _build_today_tomorrow(events: list[dict], browse_offset: int, target_w: int, target_h: int, tz: ZoneInfo,
                          palette_rgb: list | None = None, weather_cities: list[dict] | None = None,
-                          weather_units: str = "fahrenheit") -> Image.Image:
+                          weather_units: str = "fahrenheit", font_scale: float = 1.0) -> Image.Image:
    """Two _draw_agenda_day sections stacked vertically (below each other
    rather than side-by-side -- narrower than tall doesn't leave enough
    width per day for the event-row text at smaller sizes). browse_offset
    shifts the whole two-day window together, same "days" unit
    _build_agenda already uses, so NEXT/BACK behaves identically across
    both views."""
-    img = Image.new("RGB", (target_w, target_h), BG)
-    draw = ImageDraw.Draw(img)
+    img, draw, (cx0, cy0, cw, ch) = panel_style.card_canvas(target_w, target_h)

-    title_size, body_size, weather_size = _TODAY_TOMORROW_FONTS[_size_tier(target_w, target_h)]
-    title_font = ImageFont.load_default(size=title_size)
-    body_font = ImageFont.load_default(size=body_size)
-    weather_font = ImageFont.load_default(size=weather_size)
+    title_size, body_size, weather_size = (
+        panel_style.scaled_size(v, font_scale) for v in _TODAY_TOMORROW_FONTS[_size_tier(target_w, target_h)]
+    )
+    title_font = panel_style.font_bold(title_size)
+    body_font = panel_style.font_regular(body_size)
+    weather_font = panel_style.font_regular(weather_size)

    start_day = datetime.now(tz).date() + timedelta(days=browse_offset)
-    section_h = target_h // 2
+    section_h = ch // 2
    owners_seen: list[str] = []
    for i in range(2):
-        section_y0 = i * section_h
+        section_y0 = cy0 + i * section_h
        if i > 0:
-            draw.line([(MARGIN, section_y0), (target_w - MARGIN, section_y0)], fill=RULE)
+            draw.line([(cx0 + MARGIN, section_y0), (cx0 + cw - MARGIN, section_y0)], fill=RULE)
        _draw_agenda_day(img, draw, start_day + timedelta(days=i), events, tz,
-                         (0, section_y0, target_w, section_h), title_font, body_font, owners_seen,
+                         (cx0, section_y0, cw, section_h), title_font, body_font, owners_seen,
                         palette_rgb, weather_cities, weather_font, weather_units)

    return img
@@ -573,7 +578,7 @@ def _build_week(events: list[dict], browse_offset: int, target_w: int, target_h:
                week_start: int, palette_rgb: list | None = None,
                weather_cities: list[dict] | None = None, weather_units: str = "fahrenheit",
                days: int = 7, layout: str = "horizontal",
-                start_offset: int = 0) -> Image.Image:
+                start_offset: int = 0, font_scale: float = 1.0) -> Image.Image:
    """`days` (2-10, see routers/api_widgets.py's clamp) side-by-side
    columns (layout="horizontal", the original fixed-at-7 behavior
    generalized) or stacked bands (layout="vertical", reusing
@@ -585,8 +590,7 @@ def _build_week(events: list[dict], browse_offset: int, target_w: int, target_h:
    otherwise "start of the week" doesn't mean much for an arbitrary day
    count, so it instead starts `start_offset` days from today (0 =
    today, see routers/api_widgets.py's api_widget_config_save)."""
-    img = Image.new("RGB", (target_w, target_h), BG)
-    draw = ImageDraw.Draw(img)
+    img, draw, (cx0, cy0, cw, ch) = panel_style.card_canvas(target_w, target_h)
    tier = _size_tier(target_w, target_h)

    today = datetime.now(tz).date()
@@ -599,36 +603,38 @@ def _build_week(events: list[dict], browse_offset: int, target_w: int, target_h:

    if layout == "vertical":
        title_base, body_base, weather_base = _WEEK_VERTICAL_FONTS[tier]
-        title_font = ImageFont.load_default(size=max(14, title_base - days))
-        body_font = ImageFont.load_default(size=max(11, body_base - days))
-        weather_font = ImageFont.load_default(size=max(9, weather_base - days))
-        section_h = target_h // days
+        title_font = panel_style.font_bold(panel_style.scaled_size(max(14, title_base - days), font_scale))
+        body_font = panel_style.font_regular(panel_style.scaled_size(max(11, body_base - days), font_scale))
+        weather_font = panel_style.font_regular(panel_style.scaled_size(max(9, weather_base - days), font_scale))
+        section_h = ch // days
        for i in range(days):
-            section_y0 = i * section_h
+            section_y0 = cy0 + i * section_h
            if i > 0:
-                draw.line([(MARGIN, section_y0), (target_w - MARGIN, section_y0)], fill=RULE)
+                draw.line([(cx0 + MARGIN, section_y0), (cx0 + cw - MARGIN, section_y0)], fill=RULE)
            day = week_first_day + timedelta(days=i)
-            _draw_agenda_day(img, draw, day, events, tz, (0, section_y0, target_w, section_h),
+            _draw_agenda_day(img, draw, day, events, tz, (cx0, section_y0, cw, section_h),
                             title_font, body_font, owners_seen, palette_rgb,
                             weather_cities, weather_font, weather_units)
        return img

-    header_size, chip_size, weather_size = _WEEK_HORIZONTAL_FONTS[tier]
-    header_font = ImageFont.load_default(size=header_size)
-    chip_font = ImageFont.load_default(size=chip_size)
-    weather_font = ImageFont.load_default(size=weather_size)
-    col_w = (target_w - MARGIN * 2) // days
+    header_size, chip_size, weather_size = (
+        panel_style.scaled_size(v, font_scale) for v in _WEEK_HORIZONTAL_FONTS[tier]
+    )
+    header_font = panel_style.font_bold(header_size)
+    chip_font = panel_style.font_regular(chip_size)
+    weather_font = panel_style.font_regular(weather_size)
+    col_w = (cw - MARGIN * 2) // days
    header_h = 44

    for col in range(days):
        day = week_first_day + timedelta(days=col)
-        x0 = MARGIN + col * col_w
+        x0 = cx0 + MARGIN + col * col_w
        if col > 0:
-            draw.line([(x0, MARGIN), (x0, target_h - MARGIN)], fill=RULE)
+            draw.line([(x0, cy0 + MARGIN), (x0, cy0 + ch - MARGIN)], fill=RULE)
        label = day.strftime("%a %-d") if day != today else f"* {day.strftime('%a %-d')}"
-        draw_text(img, (x0 + 6, MARGIN), _truncate_to_width(draw, label, header_font, col_w - 10), header_font)
+        draw_text(img, (x0 + 6, cy0 + MARGIN), _truncate_to_width(draw, label, header_font, col_w - 10), header_font)

-        y = MARGIN + header_h
+        y = cy0 + MARGIN + header_h
        # Columns are narrow, so only what actually fits gets drawn (see
        # weather_render.draw_weather_row) -- typically one city, no label
        # (the column itself makes which day it's for obvious; a city name
@@ -640,14 +646,14 @@ def _build_week(events: list[dict], browse_offset: int, target_w: int, target_h:
                                  icon_r=8, font=weather_font, units=weather_units, show_labels=False,
                                  palette_rgb=palette_rgb)
        row_h = chip_font.size + 10
-        max_rows = max(0, (target_h - MARGIN - y) // row_h)
+        max_rows = max(0, (cy0 + ch - MARGIN - y) // row_h)
        day_events = _events_on_day(events, day, tz)
        for i, event in enumerate(day_events):
            if i >= max_rows:
-                draw_text(img, (x0 + 6, y), f"+{len(day_events) - max_rows}", chip_font, MUTED)
+                draw_text(img, (x0 + 6, y), f"+{len(day_events) - max_rows}", chip_font)
                break
            colors = _event_colors(event, owners_seen, palette_rgb)
-            _draw_color_bar(draw, x0 + 4, y + 1, x0 + 11, y + row_h - 5, colors, radius=2)
+            panel_style.draw_color_chip(draw, x0 + 4, y + 1, x0 + 11, y + row_h - 5, colors, radius=2)
            if event["all_day"]:
                _draw_mixed_line(img, draw, (x0 + 16, y), event["summary"], chip_font, col_w - 20)
            else:
@@ -669,42 +675,65 @@ _MONTH_FONTS = {"large": (16, 18), "medium": (12, 13), "small": (12, 13)}


 def _build_month(events: list[dict], browse_offset: int, target_w: int, target_h: int, tz: ZoneInfo,
-                 week_start: int, palette_rgb: list | None = None) -> Image.Image:
+                 week_start: int, palette_rgb: list | None = None, font_scale: float = 1.0) -> Image.Image:
    """Density dots per day, not literal event text -- real text at
    typical month-cell size (~100x70px) is close to unreadable on a
-    6-color dithered e-ink panel. Capped at 4 visible dots, "+N" beyond."""
-    img = Image.new("RGB", (target_w, target_h), BG)
-    draw = ImageDraw.Draw(img)
+    6-color dithered e-ink panel. Capped at 4 visible dots, "+N" beyond.
+    "Not in this month" day numbers used to be a muted gray -- now
+    de-emphasized by weight instead (Regular vs. Bold), same reasoning
+    as everywhere else this module dropped MUTED -- see module-level
+    comment above MARGIN/BG/FG."""
+    img, draw, (cx0, cy0, cw, ch) = panel_style.card_canvas(target_w, target_h)

-    header_size, day_size = _MONTH_FONTS[_size_tier(target_w, target_h)]
-    header_font = ImageFont.load_default(size=header_size)
-    day_font = ImageFont.load_default(size=day_size)
+    header_size, day_size = (
+        panel_style.scaled_size(v, font_scale) for v in _MONTH_FONTS[_size_tier(target_w, target_h)]
+    )
+    header_font = panel_style.font_bold(header_size)
+    day_font_in_month = panel_style.font_bold(day_size)
+    day_font_out_of_month = panel_style.font_regular(day_size)

    today = datetime.now(tz).date()
    target_month = _add_months(date(today.year, today.month, 1), browse_offset)
    weeks = list(calendar_module.Calendar(firstweekday=week_start).monthdatescalendar(target_month.year, target_month.month))

-    col_w = (target_w - MARGIN * 2) // 7
+    col_w = (cw - MARGIN * 2) // 7
    header_h = 28
-    grid_top = MARGIN + header_h
-    row_h = (target_h - MARGIN - grid_top) // len(weeks)
+    grid_top = cy0 + MARGIN + header_h
+    row_h = (cy0 + ch - MARGIN - grid_top) // len(weeks)
+    today_accent = panel_style.theme_color("calendar", palette_rgb)
+    today_badge_r = min(panel_style.CHIP_RADIUS, 9)

    day_names = WEEKDAY_NAMES[week_start:] + WEEKDAY_NAMES[:week_start]
    for col, name in enumerate(day_names):
-        draw_text(img, (MARGIN + col * col_w + 6, MARGIN), name[:3], header_font, MUTED)
+        draw_text(img, (cx0 + MARGIN + col * col_w + 6, cy0 + MARGIN), name[:3], header_font)

    owners_seen: list[str] = []
    dot_r = 6
    for row, week in enumerate(weeks):
        for col, day in enumerate(week):
-            x0 = MARGIN + col * col_w
+            x0 = cx0 + MARGIN + col * col_w
            y0 = grid_top + row * row_h
            draw.rectangle([x0, y0, x0 + col_w, y0 + row_h], outline=RULE)
            in_month = day.month == target_month.month
-            text_color = FG if in_month else MUTED
            if day == today:
-                draw.rectangle([x0 + 2, y0 + 2, x0 + 24, y0 + 20], outline=FG)
-            draw_text(img, (x0 + 6, y0 + 4), str(day.day), day_font, text_color)
+                # A filled accent badge (this widget's own theme color,
+                # see panel_style.THEME) instead of the old bare outline
+                # -- an actual "today" indicator, not just an outline
+                # easy to miss at ~24px. Sized around the actual digit
+                # bbox (not a fixed pixel box) so a bold 2-digit day
+                # number ("30") fits as comfortably as a single digit
+                # ("3") at every size tier.
+                day_str = str(day.day)
+                text_x, text_y = x0 + 6, y0 + 4
+                dbbox = draw.textbbox((text_x, text_y), day_str, font=day_font_in_month)
+                pad = 3
+                badge_rect = [dbbox[0] - pad, dbbox[1] - pad, dbbox[2] + pad, dbbox[3] + pad]
+                badge_r = min(today_badge_r, (badge_rect[3] - badge_rect[1]) // 2)
+                draw.rounded_rectangle(badge_rect, radius=badge_r, fill=today_accent)
+                draw_text(img, (text_x, text_y), day_str, day_font_in_month, BG)
+            else:
+                day_font = day_font_in_month if in_month else day_font_out_of_month
+                draw_text(img, (x0 + 6, y0 + 4), str(day.day), day_font)

            day_events = _events_on_day(events, day, tz)
            dot_x = x0 + 8
@@ -718,7 +747,7 @@ def _build_month(events: list[dict], browse_offset: int, target_w: int, target_h
                draw.ellipse([dot_x, dot_y, dot_x + dot_r * 2, dot_y + dot_r * 2], fill=event_color)
                dot_x += dot_r * 2 + 5
            if len(day_events) > 4:
-                draw_text(img, (dot_x, dot_y - 2), f"+{len(day_events) - 4}", header_font, MUTED)
+                draw_text(img, (dot_x, dot_y - 2), f"+{len(day_events) - 4}", header_font)

    return img

@@ -731,7 +760,7 @@ def _build(events: list[dict], view: str, browse_offset: int, target_w: int, tar
          fetch_summary: str, week_start: int, palette_rgb: list | None = None,
          weather_cities: list[dict] | None = None, weather_units: str = "fahrenheit",
          week_days: int = 7, week_layout: str = "horizontal",
-          week_start_offset: int = 0) -> Image.Image:
+          week_start_offset: int = 0, font_scale: float = 1.0) -> Image.Image:
    tz = ZoneInfo(timezone) if timezone else ZoneInfo("UTC")
    effective_view = view
    if view == "month" and not _month_view_fits(target_w, target_h):
@@ -739,13 +768,13 @@ def _build(events: list[dict], view: str, browse_offset: int, target_w: int, tar

    if effective_view == "agenda":
        img = _build_agenda(events, browse_offset, target_w, target_h, tz, palette_rgb,
-                            weather_cities, weather_units)
+                            weather_cities, weather_units, font_scale)
    elif effective_view == "today_tomorrow":
        img = _build_today_tomorrow(events, browse_offset, target_w, target_h, tz, palette_rgb,
-                                    weather_cities, weather_units)
+                                    weather_cities, weather_units, font_scale)
    elif effective_view == "week":
        img = _build_week(events, browse_offset, target_w, target_h, tz, week_start, palette_rgb,
-                          weather_cities, weather_units, week_days, week_layout, week_start_offset)
+                          weather_cities, weather_units, week_days, week_layout, week_start_offset, font_scale)
    elif effective_view == "month":
        # Never given weather -- no room for it at typical month-cell
        # size, same reasoning that already keeps this view to density
@@ -753,14 +782,19 @@ def _build(events: list[dict], view: str, browse_offset: int, target_w: int, tar
        # docstring). Colors are still passed through, though -- that's
        # a different concern (legibility of individual events) than
        # needing a whole extra strip of content.
-        img = _build_month(events, browse_offset, target_w, target_h, tz, week_start, palette_rgb)
+        img = _build_month(events, browse_offset, target_w, target_h, tz, week_start, palette_rgb, font_scale)
    else:
        img = _build_agenda(events, browse_offset, target_w, target_h, tz, palette_rgb,
-                            weather_cities, weather_units)
+                            weather_cities, weather_units, font_scale)

    if fetch_summary:
-        font = ImageFont.load_default(size=14 if _size_tier(target_w, target_h) != "small" else 11)
-        draw_text(img, (MARGIN, target_h - MARGIN - font.size), fetch_summary, font, MUTED)
+        # Drawn as a final overlay onto the already-composited img (not
+        # inside any one _build_* branch above), so it offsets by
+        # panel_style.GUTTER itself to land inside the same visible
+        # margin every builder's own content already respects.
+        font = panel_style.font_regular(14 if _size_tier(target_w, target_h) != "small" else 11)
+        draw_text(img, (panel_style.GUTTER + MARGIN, target_h - panel_style.GUTTER - MARGIN - font.size),
+                 fetch_summary, font)

    return img

@@ -770,14 +804,14 @@ def render_calendar(events: list[dict], view: str, browse_offset: int, orientati
                    fetch_summary: str = "", manage: dict | None = None, week_start: int = 0,
                    weather_cities: list[dict] | None = None, weather_units: str = "fahrenheit",
                    week_days: int = 7, week_layout: str = "horizontal",
-                    week_start_offset: int = 0) -> bytes:
+                    week_start_offset: int = 0, panel_w: int = EPD_WIDTH, panel_h: int = EPD_HEIGHT) -> bytes:
    """Renders one of CALENDAR_VIEWS full-panel to the panel's packed
-    format. Always returns exactly EPD_WIDTH*EPD_HEIGHT/2 bytes, same
-    invariant every other renderer honors. weather_cities is
-    routers/common.py's get_or_refresh_weather() cache, or None/[] to
-    omit the weather strip entirely (also always omitted for view ==
-    "month")."""
-    target_w, target_h = logical_render_size(orientation)
+    format. Returns exactly panel_w*panel_h/2 bytes (see
+    image_pipeline.panel_size), same invariant every other renderer
+    honors. weather_cities is routers/common.py's get_or_refresh_weather()
+    cache, or None/[] to omit the weather strip entirely (also always
+    omitted for view == "month")."""
+    target_w, target_h = logical_render_size(orientation, panel_w, panel_h)
    img = _build(events, view, browse_offset, target_w, target_h, timezone, fetch_summary, week_start,
                palette_rgb, weather_cities, weather_units, week_days, week_layout, week_start_offset)
    img = _apply_manage_overlay(img, manage)
@@ -790,13 +824,14 @@ def render_calendar_preview_png(events: list[dict], view: str, browse_offset: in
                                fetch_summary: str = "", manage: dict | None = None, week_start: int = 0,
                                weather_cities: list[dict] | None = None, weather_units: str = "fahrenheit",
                                week_days: int = 7, week_layout: str = "horizontal",
-                                week_start_offset: int = 0) -> bytes:
+                                week_start_offset: int = 0, font_scale: float = 1.0,
+                                panel_w: int = EPD_WIDTH, panel_h: int = EPD_HEIGHT) -> bytes:
    """Same pipeline as render_calendar, but a normal browser-viewable
    PNG in logical (upright) orientation -- mirrors
    image_pipeline.render_preview_png's relationship to render_frame."""
-    target_w, target_h = logical_render_size(orientation)
+    target_w, target_h = logical_render_size(orientation, panel_w, panel_h)
    img = _build(events, view, browse_offset, target_w, target_h, timezone, fetch_summary, week_start,
-                palette_rgb, weather_cities, weather_units, week_days, week_layout, week_start_offset)
+                palette_rgb, weather_cities, weather_units, week_days, week_layout, week_start_offset, font_scale)
    img = _apply_manage_overlay(img, manage)
    quantized = _quantize(img, palette_rgb, dither_strength=1.0)
    buf = io.BytesIO()
@@ -811,25 +846,27 @@ _TASKS_FONTS = {"large": (24, 18), "medium": (20, 16), "small": (16, 13)}


 def _build_tasks(tasks: list[dict], target_w: int, target_h: int, palette_rgb: list | None = None,
-                 title: str = "Tasks") -> Image.Image:
+                 title: str = "Tasks", font_scale: float = 1.0) -> Image.Image:
    """A tasks widget's entire region is the checklist -- unlike the old
    week-view slot, there's no day columns/header to share space with,
    so this is just _draw_tasks over the whole box."""
-    img = Image.new("RGB", (target_w, target_h), BG)
-    draw = ImageDraw.Draw(img)
-    title_size, body_size = _TASKS_FONTS[_size_tier(target_w, target_h)]
-    title_font = ImageFont.load_default(size=title_size)
-    body_font = ImageFont.load_default(size=body_size)
-    _draw_tasks(img, draw, (0, 0, target_w, target_h), tasks, title_font, body_font, palette_rgb, title)
+    img, draw, region = panel_style.card_canvas(target_w, target_h)
+    title_size, body_size = (
+        panel_style.scaled_size(v, font_scale) for v in _TASKS_FONTS[_size_tier(target_w, target_h)]
+    )
+    title_font = panel_style.font_bold(title_size)
+    body_font = panel_style.font_regular(body_size)
+    _draw_tasks(img, draw, region, tasks, title_font, body_font, palette_rgb, title)
    return img


 def render_tasks(tasks: list[dict], orientation: str, palette_rgb: list | None,
-                 manage: dict | None = None, title: str = "Tasks") -> bytes:
+                 manage: dict | None = None, title: str = "Tasks",
+                 panel_w: int = EPD_WIDTH, panel_h: int = EPD_HEIGHT) -> bytes:
    """Renders the tasks widget full-panel to the panel's packed format.
-    Always returns exactly EPD_WIDTH*EPD_HEIGHT/2 bytes, same invariant
-    every other renderer honors."""
-    target_w, target_h = logical_render_size(orientation)
+    Returns exactly panel_w*panel_h/2 bytes, same invariant every other
+    renderer honors."""
+    target_w, target_h = logical_render_size(orientation, panel_w, panel_h)
    img = _build_tasks(tasks, target_w, target_h, palette_rgb, title)
    img = _apply_manage_overlay(img, manage)
    quantized = _quantize(img, palette_rgb, dither_strength=1.0)
@@ -837,12 +874,13 @@ def render_tasks(tasks: list[dict], orientation: str, palette_rgb: list | None,


 def render_tasks_preview_png(tasks: list[dict], orientation: str, palette_rgb: list | None,
-                             manage: dict | None = None, title: str = "Tasks") -> bytes:
+                             manage: dict | None = None, title: str = "Tasks", font_scale: float = 1.0,
+                             panel_w: int = EPD_WIDTH, panel_h: int = EPD_HEIGHT) -> bytes:
    """Same pipeline as render_tasks, but a normal browser-viewable PNG
    in logical (upright) orientation -- mirrors render_calendar_preview_
    png's relationship to render_calendar."""
-    target_w, target_h = logical_render_size(orientation)
-    img = _build_tasks(tasks, target_w, target_h, palette_rgb, title)
+    target_w, target_h = logical_render_size(orientation, panel_w, panel_h)
+    img = _build_tasks(tasks, target_w, target_h, palette_rgb, title, font_scale=font_scale)
    img = _apply_manage_overlay(img, manage)
    quantized = _quantize(img, palette_rgb, dither_strength=1.0)
    buf = io.BytesIO()
@@ -15,7 +15,7 @@ import io

 from PIL import Image, ImageOps

-from .image_pipeline import _has_bounding_box, _placement_transform, logical_render_size
+from .image_pipeline import EPD_HEIGHT, EPD_WIDTH, _has_bounding_box, _placement_transform, logical_render_size

 # Not a memory constraint anymore (the overlay renders server-side now,
 # not malloc'd per-label on the device) -- purely a legibility cap. A
@@ -25,7 +25,8 @@ MAX_LABELED_FACES = 6


 def compute_face_labels(preview_bytes: bytes, faces: list[dict], display_mode: str,
-                        orientation: str = "landscape", region: tuple[int, int, int, int] | None = None) -> list[dict]:
+                        orientation: str = "landscape", region: tuple[int, int, int, int] | None = None,
+                        panel_w: int = EPD_WIDTH, panel_h: int = EPD_HEIGHT) -> list[dict]:
    """Returns up to MAX_LABELED_FACES [{"name", "x", "y"}], x/y in
    logical (pre-rotation) frame space at each named face's bottom-center
    point -- manage_overlay.compose() draws these directly onto the
@@ -56,7 +57,7 @@ def compute_face_labels(preview_bytes: bytes, faces: list[dict], display_mode: s
        return []

    if region is None:
-        logical_w, logical_h = logical_render_size(orientation)
+        logical_w, logical_h = logical_render_size(orientation, panel_w, panel_h)
        region_x0, region_y0, target_w, target_h = 0, 0, logical_w, logical_h
    else:
        region_x0, region_y0, target_w, target_h = region
@@ -0,0 +1,667 @@
+"""Experimental "modern" render style, offered as an opt-in alternative
+to several widget types' hand-drawn PIL primitives: Jinja2 + a
+persistent headless Chromium browser (Playwright) -- see docs/widgets.md
+for the design rationale (gradients/shadows/soft shading that PIL can't
+easily do, at the cost of a real browser-process dependency). Everything
+in this module is shared infrastructure (the persistent browser, ordered
+dithering) plus one `build_*` function per widget type that has a
+modern-style builder -- battery/text/tasks/static image/whiteboard live
+here directly (mirroring how those widget types are themselves "inlined"
+in their own widget.py rather than getting a dedicated render module);
+calendar's (all four view modes, see calendar_html_render.py) is the one
+exception, kept separate the same reason calendar_render.py itself is
+its own 800+ line file rather than joining battery/text/tasks inline.
+Not offered for the photos widget -- a real photograph isn't a
+synthesized dashboard card, and photos has its own separate palette/
+dithering concern instead (see widgets/photos.py).
+
+Two things this module owns that nothing else in the codebase needed
+before:
+
+1. A **persistent** background browser process. Widget rendering already
+   happens concurrently across a fresh `ThreadPoolExecutor` per frame
+   request (routers/device.py's _render_widgets) -- Playwright's sync
+   API is thread-affine (an object must be used from the thread that
+   created it), so a single browser object can't be handed across those
+   ad-hoc worker threads, and relaunching a full Chromium process on
+   every widget render would be real, avoidable latency. Fix: one
+   background thread runs its own persistent asyncio event loop hosting
+   one long-lived `Browser`, lazily started on first use (see start()) --
+   not eagerly at server startup, so a deployment that never enables the
+   weather widget's "modern" style never launches Chromium at all and
+   never needs Playwright's browser binaries installed. main.py's
+   lifespan only wires up the *shutdown* half (stop()), so a clean
+   server restart doesn't leave an orphaned Chromium process behind if
+   this was ever actually used. render_html_to_image() is a plain sync
+   function any worker thread can call, bridging in via
+   `asyncio.run_coroutine_threadsafe` (the standard safe cross-thread
+   entry point into a *running* loop on another thread).
+
+2. **Per-region ordered (Bayer) dithering against the palette**, done
+   here rather than in the shared image_pipeline.py pipeline.
+   render_panel's whole-canvas single Floyd-Steinberg pass exists
+   because Floyd-Steinberg's error diffusion can't be split across
+   independently-quantized regions without a visible seam at the
+   boundary -- but that reasoning doesn't apply to ordered dithering,
+   which has no cross-pixel error term (each pixel's dither decision
+   only depends on its own position + color). So this module dithers its
+   own rendered widget to *already-exact* palette colors before
+   returning it; the later shared Floyd-Steinberg pass sees zero
+   quantization error there and leaves it untouched -- the same
+   "pre-commit to exact palette colors" trick image_pipeline.draw_text
+   and the hand-drawn weather icons already rely on, just reached a
+   different way. Floyd-Steinberg keeps working exactly as before for
+   photos and every other (classic-rendered) widget region.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import io
+import threading
+from datetime import date
+from pathlib import Path
+
+import numpy as np
+from jinja2 import Environment, FileSystemLoader, select_autoescape
+from PIL import Image
+
+from . import panel_style, theme_tokens
+from .image_pipeline import DEFAULT_PALETTE_RGB, hex_to_rgb
+
+_TEMPLATE_DIR = Path(__file__).resolve().parent / "templates" / "widget_html"
+_FONT_DIR = Path(__file__).resolve().parent / "fonts"
+
+_jinja_env = Environment(
+    loader=FileSystemLoader(str(_TEMPLATE_DIR)),
+    autoescape=select_autoescape(["html", "jinja"]),
+)
+
+CATEGORY_EMOJI = {
+    "clear": "☀️",
+    "partly_cloudy": "⛅",
+    "cloudy": "☁️",
+    "fog": "\U0001f32b️",
+    "rain": "\U0001f327️",
+    "snow": "❄️",
+    "thunderstorm": "⛈️",
+}
+
+# Spelled-out condition word for the "bold minimal" current-mode layout --
+# classic's build_current never needed one (icon + temp only), but the
+# redesigned modern layout has room for a secondary line under the temp.
+CATEGORY_LABEL = {
+    "clear": "Clear",
+    "partly_cloudy": "Partly cloudy",
+    "cloudy": "Cloudy",
+    "fog": "Fog",
+    "rain": "Rain",
+    "snow": "Snow",
+    "thunderstorm": "Thunderstorm",
+}
+
+
+def _rgb_to_hex(rgb: tuple[int, int, int]) -> str:
+    return "#%02x%02x%02x" % tuple(rgb)
+
+
+def _darken_hex(rgb: tuple[int, int, int], factor: float = 0.75) -> str:
+    """A darker shade of `rgb` for a CSS gradient's second stop -- purely
+    decorative (ordered_dither commits everything to exact palette colors
+    regardless of which literal hex a gradient starts from)."""
+    return _rgb_to_hex(tuple(max(0, round(c * factor)) for c in rgb))
+
+
+def _clamp(value: float, lo: float, hi: float) -> float:
+    """Keeps a size/spacing value proportional to widget dimensions
+    (`value` is always some fraction of target_w/target_h) while still
+    guaranteeing a floor (stays legible on a 1-2 grid-cell widget) and a
+    ceiling (stops padding/type from just growing forever on a
+    near-full-panel widget -- see build_current's docstring)."""
+    return max(lo, min(hi, value))
+
+
+# --- Persistent background browser -------------------------------------
+
+_loop: asyncio.AbstractEventLoop | None = None
+_loop_thread: threading.Thread | None = None
+_browser = None
+_playwright_cm = None
+_start_lock = threading.Lock()
+
+
+async def _launch_browser() -> None:
+    global _browser, _playwright_cm
+    from playwright.async_api import async_playwright
+
+    _playwright_cm = async_playwright()
+    playwright = await _playwright_cm.__aenter__()
+    _browser = await playwright.chromium.launch()
+
+
+async def _close_browser() -> None:
+    global _browser, _playwright_cm
+    if _browser is not None:
+        await _browser.close()
+        _browser = None
+    if _playwright_cm is not None:
+        await _playwright_cm.__aexit__(None, None, None)
+        _playwright_cm = None
+
+
+def start() -> None:
+    """Launches the background event loop + persistent Chromium browser,
+    if not already running. Called lazily by render_html_to_image on
+    first use (not from main.py's lifespan -- see module docstring for
+    why this must stay opt-in) -- exposed directly too, for tests that
+    want to control startup explicitly. Idempotent -- a second call
+    while already started is a no-op."""
+    global _loop, _loop_thread
+    if _loop is not None:
+        return
+    ready = threading.Event()
+
+    def _run() -> None:
+        global _loop
+        loop = asyncio.new_event_loop()
+        asyncio.set_event_loop(loop)
+        _loop = loop
+        ready.set()
+        loop.run_forever()
+
+    _loop_thread = threading.Thread(target=_run, daemon=True, name="html-render-loop")
+    _loop_thread.start()
+    ready.wait()
+    asyncio.run_coroutine_threadsafe(_launch_browser(), _loop).result()
+
+
+def stop() -> None:
+    """Closes the browser and stops the background loop -- called from
+    main.py's lifespan shutdown so a server restart never leaves an
+    orphaned Chromium process behind. No-op if start() was never called
+    (the common case: most deployments never enable "modern" style)."""
+    global _loop, _loop_thread
+    if _loop is None:
+        return
+    asyncio.run_coroutine_threadsafe(_close_browser(), _loop).result()
+    _loop.call_soon_threadsafe(_loop.stop)
+    _loop_thread.join(timeout=5)
+    _loop = None
+    _loop_thread = None
+
+
+async def _screenshot(html: str, target_w: int, target_h: int) -> bytes:
+    page = await _browser.new_page(viewport={"width": target_w, "height": target_h}, device_scale_factor=1)
+    try:
+        await page.set_content(html, wait_until="networkidle")
+        return await page.screenshot()
+    finally:
+        await page.close()
+
+
+def render_html_to_image(html: str, target_w: int, target_h: int) -> Image.Image:
+    """Renders `html` (already sized to target_w x target_h via its own
+    <style>) through the persistent headless Chromium browser and
+    returns an RGB image of exactly that size. Safe to call from any
+    thread -- bridges into the dedicated background asyncio loop via
+    run_coroutine_threadsafe. Lazily calls start() on first use (see its
+    docstring) -- the first "modern" style render on a freshly-started
+    server pays Chromium's launch latency; every render after that reuses
+    the same persistent browser."""
+    if _loop is None:
+        with _start_lock:
+            if _loop is None:
+                start()
+    future = asyncio.run_coroutine_threadsafe(_screenshot(html, target_w, target_h), _loop)
+    png_bytes = future.result()
+    return Image.open(io.BytesIO(png_bytes)).convert("RGB")
+
+
+# --- Ordered (Bayer 8x8) dithering against an arbitrary palette ---------
+
+_BAYER8 = (
+    np.array(
+        [
+            [0, 32, 8, 40, 2, 34, 10, 42],
+            [48, 16, 56, 24, 50, 18, 58, 26],
+            [12, 44, 4, 36, 14, 46, 6, 38],
+            [60, 28, 52, 20, 62, 30, 54, 22],
+            [3, 35, 11, 43, 1, 33, 9, 41],
+            [51, 19, 59, 27, 49, 17, 57, 25],
+            [15, 47, 7, 39, 13, 45, 5, 37],
+            [63, 31, 55, 23, 61, 29, 53, 21],
+        ],
+        dtype=np.float32,
+    )
+    / 64.0
+    - 0.5
+)
+
+
+def ordered_dither(img: Image.Image, palette_rgb: list | None, amplitude: float = 48.0) -> Image.Image:
+    """Bayer-ordered dither of `img` against `palette_rgb` (falls back to
+    DEFAULT_PALETTE_RGB) -- every output pixel is one of the palette's
+    exact colors, spatially patterned rather than error-diffused, so it's
+    safe to run per-region before compositing (see module docstring for
+    why that's not true of Floyd-Steinberg). `amplitude` is the Bayer
+    bias's full swing in 0-255 RGB units before nearest-palette-color
+    matching -- 48 was the value this render style was tuned against in
+    the exploratory spike behind this feature; not exposed as a per-frame
+    setting (unlike dither_strength) since there's only one consumer of
+    it today."""
+    palette = np.array(palette_rgb or DEFAULT_PALETTE_RGB, dtype=np.float32)
+    arr = np.asarray(img.convert("RGB"), dtype=np.float32)
+    h, w, _ = arr.shape
+    tile = np.tile(_BAYER8, (h // 8 + 1, w // 8 + 1))[:h, :w]
+    biased = np.clip(arr + tile[:, :, None] * amplitude, 0, 255)
+    diffs = biased[:, :, None, :] - palette[None, None, :, :]
+    dists = np.einsum("hwkc,hwkc->hwk", diffs, diffs)
+    idx = np.argmin(dists, axis=2)
+    return Image.fromarray(palette[idx].astype(np.uint8), "RGB")
+
+
+def ordered_dither_regions(rendered: Image.Image, palette_rgb: list | None, base_amplitude: float = 48.0,
+                           accent_regions: list[tuple[tuple[int, int, int, int], float]] = ()) -> Image.Image:
+    """Like `ordered_dither`, but lets specific rectangles (e.g. a themed
+    header bar) dither at a higher amplitude than the rest of the widget.
+    A single higher amplitude applied to a whole widget washes out pale
+    content (a weather icon's white cloud body nearly disappeared in
+    testing); dithering the base image at the safe default and only
+    re-dithering an accent rect on top -- pasted back over the base --
+    lets a header carry a rich, arbitrary accent hue (via denser
+    stippling) without touching icon/text legibility elsewhere. Safe to
+    do per-region for the same reason `ordered_dither` is safe per-widget
+    (see its docstring): no cross-pixel error-diffusion term, so each
+    region's result depends only on its own pixels."""
+    base = ordered_dither(rendered, palette_rgb, amplitude=base_amplitude)
+    for (x0, y0, x1, y1), amplitude in accent_regions:
+        crop = rendered.crop((x0, y0, x1, y1))
+        base.paste(ordered_dither(crop, palette_rgb, amplitude=amplitude), (x0, y0))
+    return base
+
+
+# --- Weather "modern" style ----------------------------------------------
+
+def _day_label(day_date: date) -> str:
+    delta = (day_date - date.today()).days
+    if delta == 0:
+        return "Today"
+    if delta == 1:
+        return "Tomorrow"
+    return day_date.strftime("%a")
+
+
+def _short_city(city_label: str) -> str:
+    """geocode_city (see docs/widgets.md's Weather widget section) hands
+    back a full "City, Region, Country" string -- fine for classic's
+    build_current (just drawn as one line, however wide) but wrong for
+    the bold-minimal layout's small top-row label, where a 1-2 grid-
+    cell widget has no room for the whole thing. Every phone-homescreen
+    weather widget this style is drawing from shows just the city, so
+    that's what this keeps -- CSS `text-overflow: ellipsis` is still in
+    the template as a safety net for a custom single-segment label
+    that's itself too long, not as the primary truncation strategy."""
+    return city_label.split(",")[0].strip()
+
+
+def build_current(entry: dict | None, target_w: int, target_h: int, palette_rgb: list | None = None,
+                  units: str = "fahrenheit", city_label: str = "", theme_name: str | None = None) -> Image.Image:
+    """HTML/CSS-rendered analogue of weather_render.build_current --
+    same call signature, so app/widgets/weather.py can dispatch to
+    either interchangeably. Returns an already-palette-exact RGB image
+    (see ordered_dither).
+
+    "Bold minimal" layout: the temperature itself is the graphic --
+    city label + icon in a top row, the temp (dominant) and spelled-out
+    condition anchored to the bottom, no card/border/shadow at all. This
+    is a deliberate departure from every other modern-style widget's
+    card-on-white-canvas chrome (see docs/widgets.md) -- there's nothing
+    for a "card" to visually separate from here, so `theme["radius"]`/
+    `theme["shadow"]` have no effect on this template; still theme-aware
+    for font_family only, same as before. No header/accent region either
+    (see ordered_dither_regions' docstring) -- a themed accent has
+    nothing to attach to in a chrome-free layout.
+
+    Every size below is a fraction of `base` (the widget's shorter side),
+    clamped to a floor/ceiling rather than fixed -- so a 1-grid-cell
+    widget doesn't get comically oversized padding relative to its
+    content, and a near-full-panel widget doesn't get comically large
+    padding relative to *its* content either. Floors/ceilings are tuned
+    by eye against real widget sizes, not derived from anything."""
+    img = Image.new("RGB", (target_w, target_h), (255, 255, 255))
+    if not entry:
+        return img
+
+    theme = theme_tokens.resolve_theme(theme_name, "weather", palette_rgb)
+    unit_suffix = "F" if units == "fahrenheit" else "C"
+    base = min(target_w, target_h)
+    pad = _clamp(base * 0.09, 10, 26)
+    icon_size = _clamp(base * 0.20, 22, 60)
+    temp_size = _clamp(base * 0.46, 30, 150)
+    deg_size = _clamp(temp_size * 0.28, 12, 40)
+    cond_size = _clamp(base * 0.075, 11, 20)
+    city_size = _clamp(base * 0.06, 10, 15)
+    template = _jinja_env.get_template("weather_current.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, pad=round(pad),
+        font_regular=theme["font_regular"], font_bold=theme["font_bold"],
+        emoji=CATEGORY_EMOJI.get(entry["category"], ""),
+        condition=CATEGORY_LABEL.get(entry["category"], ""),
+        temp=round(entry["temp"]), unit_suffix=unit_suffix, city_label=_short_city(city_label),
+        icon_size=round(icon_size), temp_size=round(temp_size), deg_size=round(deg_size),
+        cond_size=round(cond_size), city_size=round(city_size),
+    )
+    rendered = render_html_to_image(html, target_w, target_h)
+    return ordered_dither(rendered, palette_rgb)
+
+
+def build_daily(daily: dict[str, dict], target_w: int, target_h: int, palette_rgb: list | None = None,
+               units: str = "fahrenheit", city_label: str = "", theme_name: str | None = None) -> Image.Image:
+    """HTML/CSS-rendered analogue of weather_render.build_daily -- same
+    call signature. Returns an already-palette-exact RGB image (see
+    ordered_dither).
+
+    "Bold minimal" layout, matching build_current: no card/border/
+    shadow, a row of day columns each carrying its own high (dominant)
+    / low (muted) temp the same way build_current makes the current
+    temp dominant. The old full-width gradient banner is gone --
+    city_label, when set, is a slim accent-colored rule (not a block)
+    with the city name understated beneath it, so there's still
+    somewhere for a theme's accent hue to show up (dithered richer via
+    ordered_dither_regions, same mechanism as before) without dragging
+    back the "card with a colored header" chrome this redesign is
+    moving away from. `theme["radius"]`/`theme["shadow"]` are unused
+    here for the same reason as build_current -- no card for them to
+    apply to."""
+    img = Image.new("RGB", (target_w, target_h), (255, 255, 255))
+    days = list(daily.items())
+    if not days:
+        return img
+
+    theme = theme_tokens.resolve_theme(theme_name, "weather", palette_rgb)
+    unit_suffix = "F" if units == "fahrenheit" else "C"
+    base = min(target_w, target_h)
+    pad = round(_clamp(base * 0.08, 10, 22))
+    col_w = max(1, (target_w - pad * 2) // len(days))
+    col_gap = round(_clamp(col_w * 0.12, 4, 16))
+    icon_size = round(_clamp(col_w * 0.30, 16, 32))
+    day_label_size = round(_clamp(col_w * 0.15, 10, 14))
+    high_size = round(_clamp(col_w * 0.32, 16, 32))
+    low_size = round(max(9, high_size * 0.55))
+    city_size = round(_clamp(base * 0.055, 10, 14))
+    accent_h = round(_clamp(base * 0.025, 4, 8))
+    day_entries = [
+        {
+            "label": _day_label(date.fromisoformat(day_str)),
+            "emoji": CATEGORY_EMOJI.get(d["category"], ""),
+            "high": round(d["high"]),
+            "low": round(d["low"]),
+        }
+        for day_str, d in days
+    ]
+    template = _jinja_env.get_template("weather_daily.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, pad=pad, col_gap=col_gap,
+        font_regular=theme["font_regular"], font_bold=theme["font_bold"],
+        city_label=_short_city(city_label), city_size=city_size, accent_h=accent_h,
+        accent_start=theme["accent_hex"], accent_end=theme["accent_hex_dark"],
+        days=day_entries, icon_size=icon_size, day_label_size=day_label_size,
+        high_size=high_size, low_size=low_size, unit_suffix=unit_suffix,
+    )
+    rendered = render_html_to_image(html, target_w, target_h)
+    if not city_label:
+        return ordered_dither(rendered, palette_rgb)
+    accent_rect = (pad, pad, target_w - pad, pad + accent_h)
+    return ordered_dither_regions(rendered, palette_rgb, accent_regions=[(accent_rect, theme["accent_amplitude"])])
+
+
+SUPPORTED_MODES = ("current", "daily")
+
+
+def build(mode: str, data, target_w: int, target_h: int, palette_rgb: list | None = None,
+         units: str = "fahrenheit", city_label: str = "", theme_name: str | None = None) -> Image.Image:
+    """Dispatches to build_current/build_daily -- mirrors weather_render.
+    build()'s signature (minus interval_hours, which no modern-style mode
+    uses) so app/widgets/weather.py and the weather preview endpoint can
+    call either module identically. Only call this for mode in
+    SUPPORTED_MODES -- callers are expected to have already fallen back to
+    weather_render.build() for hourly/multi_city (see weather.py)."""
+    if mode == "current":
+        return build_current(data, target_w, target_h, palette_rgb, units, city_label, theme_name)
+    return build_daily(data, target_w, target_h, palette_rgb, units, city_label, theme_name)
+
+
+def render_weather_preview_png(mode: str, data, orientation: str, palette_rgb: list | None,
+                               units: str = "fahrenheit", city_label: str = "",
+                               theme_name: str | None = None, panel_w: int | None = None,
+                               panel_h: int | None = None) -> bytes:
+    """Modern-style analogue of weather_render.render_weather_preview_png
+    -- same browser-viewable-PNG convention every other widget's preview
+    endpoint uses. build()'s output is already palette-exact (see
+    ordered_dither), so the final _quantize pass here is a no-op on it,
+    same reasoning as the module docstring's compositing story."""
+    from .image_pipeline import EPD_HEIGHT, EPD_WIDTH, _quantize, _png_bytes, logical_render_size
+
+    target_w, target_h = logical_render_size(orientation, panel_w or EPD_WIDTH, panel_h or EPD_HEIGHT)
+    img = build(mode, data, target_w, target_h, palette_rgb, units, city_label, theme_name)
+    quantized = _quantize(img, palette_rgb, dither_strength=1.0)
+    return _png_bytes(quantized)
+
+
+# --- Battery "modern" style ------------------------------------------------
+
+def _battery_sizes(target_w: int, target_h: int, num_lines: int, scale: float) -> dict:
+    base = min(target_w, target_h)
+    icon_h = max(14, int(base * 0.15 * scale))
+    pct_size = max(20, int(base * 0.42 * scale))
+    line_size = max(9, int(base * 0.085 * scale))
+    gap = max(4, int(base * 0.035 * scale))
+    total = icon_h + gap + pct_size + num_lines * (line_size + gap)
+    return {"icon_h": icon_h, "pct_size": pct_size, "line_size": line_size, "gap": gap, "total": total}
+
+
+def build_battery(percent: int, lines: list[str], target_w: int, target_h: int,
+                  palette_rgb: list | None = None, theme_name: str | None = None) -> Image.Image:
+    """HTML/CSS-rendered analogue of widgets/battery.py's classic PIL
+    drawing -- same icon+percent+caption-lines shape, `lines` already
+    resolved by the caller (widgets/battery.py's _lines_for(), shared
+    with the classic path so the estimate/age formatting only lives in
+    one place). Returns an already-palette-exact RGB image (see
+    ordered_dither). Theme-aware for font only -- the charge-level
+    fill_color below is a functional status signal (not a style choice)
+    and is never touched by a theme, and there's no header/accent region
+    to dither richer via ordered_dither_regions.
+
+    Bold-minimal: no card (theme["radius"] unused, same carve-out as
+    weather's build_current -- see docs/widgets.md); the percent is the
+    hero value anchored toward the bottom, same treatment build_current
+    gives the temperature, with the icon small and secondary above it
+    instead of both competing at the same size like the old centered
+    layout did.
+
+    Shrinks icon/text sizes together (in 0.05 steps down to 0.3x) until
+    the whole stack actually fits the available height -- the classic
+    PIL path solves the same "icon + percent + 0-2 lines in a fixed box"
+    problem by truncating lines that don't fit; scaling down instead
+    keeps every resolved line visible, which reads better for a widget
+    that only ever has at most 2 short caption lines to begin with."""
+    pad = round(_clamp(min(target_w, target_h) * 0.09, 10, 26))
+    avail_h = target_h - pad * 2
+    num_lines = len(lines)
+    scale = 1.0
+    sizes = _battery_sizes(target_w, target_h, num_lines, scale)
+    while sizes["total"] > avail_h and scale > 0.3:
+        scale -= 0.05
+        sizes = _battery_sizes(target_w, target_h, num_lines, scale)
+    # Extreme case (a 1x1-grid-cell-sized widget in "detailed" mode):
+    # scale bottomed out and it still doesn't fit -- drop the least
+    # important line rather than render overlapping text, same
+    # graceful-degradation idiom the classic PIL path's own
+    # `if y + small_font_size > ...: break` truncation already uses.
+    while sizes["total"] > avail_h and lines:
+        lines = lines[:-1]
+        num_lines = len(lines)
+        sizes = _battery_sizes(target_w, target_h, num_lines, scale)
+
+    theme = theme_tokens.resolve_theme(theme_name, "battery", palette_rgb)
+    fill_color = panel_style.battery_fill_color(percent, palette_rgb)
+    icon_h = sizes["icon_h"]
+    icon_w = int(icon_h * 1.8)
+    stroke = max(2, icon_h // 12)
+    nub_w = max(3, icon_w // 10)
+    template = _jinja_env.get_template("battery.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, pad=pad,
+        font_regular=theme["font_regular"], font_bold=theme["font_bold"], percent=percent, lines=lines,
+        icon_w=icon_w, icon_h=icon_h, icon_radius=icon_h // 6, stroke=stroke,
+        fill_pct=max(0, min(100, percent)), fill_radius=max(0, icon_h // 6 - stroke),
+        fill_color=_rgb_to_hex(fill_color), fill_color_dark=_darken_hex(fill_color),
+        nub_w=nub_w, nub_h=icon_h // 2, nub_radius=max(1, nub_w // 3),
+        pct_size=sizes["pct_size"], line_size=sizes["line_size"], line_gap=sizes["gap"],
+    )
+    rendered = render_html_to_image(html, target_w, target_h)
+    return ordered_dither(rendered, palette_rgb)
+
+
+# --- Text "modern" style ---------------------------------------------------
+
+def build_text(cfg, target_w: int, target_h: int, palette_rgb: list | None = None,
+              theme_name: str | None = None) -> Image.Image:
+    """HTML/CSS-rendered analogue of widgets/text.py's classic PIL
+    drawing. Reuses widgets/text.py's own `_fit()` for the one piece of
+    logic CSS has no native equivalent for (shrink-to-fit sizing) --
+    `_fit` measures against the exact same vendored font files via PIL,
+    so the resolved size is a real fit decision, not a guess -- but lets
+    the browser do its own text wrapping/line-breaking at that size
+    (paragraphs/runs passed through directly as HTML) rather than
+    replicating `_fit`'s own word-wrapped line list; the two wrapping
+    algorithms can disagree on exact break points, an acceptable
+    approximation since this style only needs to look good and fit
+    reasonably, not be pixel-identical to classic. Returns an already-
+    palette-exact RGB image (see ordered_dither).
+
+    theme_name is accepted (every modern-style build_* function takes
+    one, threaded uniformly from frame.theme) but deliberately unused --
+    the text widget's own font_family is a per-widget, user-authored
+    choice (see widgets/text.py's module docstring), same carve-out
+    reasoning as run-level colors; a frame theme overriding it would
+    silently undo an explicit user choice. text.html.jinja also has no
+    card chrome (no radius/shadow) for a theme to touch."""
+    from PIL import ImageDraw
+
+    from . import widgets  # local import: heavy-ish, and only "modern" text needs it
+
+    text_widget = widgets.text
+    bg_rgb = (hex_to_rgb(cfg.background_color) if cfg.background_color else None) or (255, 255, 255)
+    family = cfg.font_family if cfg.font_family in text_widget.FONT_FAMILIES else text_widget.DEFAULT_FONT_FAMILY
+    paragraphs = cfg.content or []
+    margin = text_widget.MARGIN
+    max_width = max(10, target_w - 2 * margin)
+    max_height = max(10, target_h - 2 * margin)
+
+    measure_img = Image.new("RGB", (1, 1))
+    draw = ImageDraw.Draw(measure_img)
+    size, _lines = text_widget._fit(draw, paragraphs, family, cfg.font_size, max_width, max_height)
+
+    files = text_widget._FONT_FILES.get(family) or text_widget._FONT_FILES[text_widget.DEFAULT_FONT_FAMILY]
+    align = cfg.align if cfg.align in ("left", "center", "right") else "left"
+    template = _jinja_env.get_template("text.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, margin=margin, bg_color=_rgb_to_hex(bg_rgb),
+        size=size, line_height=text_widget.LINE_HEIGHT_FACTOR, align=align,
+        font_regular=str(_FONT_DIR / files[(False, False)]), font_bold=str(_FONT_DIR / files[(True, False)]),
+        font_italic=str(_FONT_DIR / files[(False, True)]), font_bold_italic=str(_FONT_DIR / files[(True, True)]),
+        paragraphs=paragraphs,
+    )
+    rendered = render_html_to_image(html, target_w, target_h)
+    return ordered_dither(rendered, palette_rgb)
+
+
+# --- Tasks "modern" style ---------------------------------------------------
+
+def build_tasks(tasks: list[dict], target_w: int, target_h: int, palette_rgb: list | None = None,
+                title: str = "Tasks", theme_name: str | None = None, font_scale: float = 1.0) -> Image.Image:
+    """HTML/CSS-rendered analogue of calendar_render._build_tasks --
+    same header+checklist shape. Reuses calendar_render's own
+    _event_colors/_fmt_task_due (the exact color-dedup/due-date-format
+    logic the classic renderer uses) so a task's color chip/due string
+    matches classic style exactly; only the drawing differs -- and a
+    theme's accent never touches those per-owner chip colors (identity-
+    coding, not style) or the done-checkbox fill (a completion state
+    signal, not a style choice -- it happens to reuse the accent color,
+    but that's incidental, same as before this redesign).
+
+    Bold-minimal: no card (theme["shadow"]/["radius"] unused, same
+    carve-out as calendar's redesigned views -- see docs/widgets.md).
+    The old gradient header banner is now a slim accent rule + plain
+    bold title, matching every calendar view's day-header language --
+    only the rule dithers at the theme's richer accent_amplitude, not
+    the title text sitting on it. Returns an already-palette-exact RGB
+    image (see ordered_dither)."""
+    from .calendar_render import _event_colors, _fmt_task_due
+
+    theme = theme_tokens.resolve_theme(theme_name, "tasks", palette_rgb)
+    base = min(target_w, target_h)
+    accent_h = round(_clamp(base * 0.025, 3, 6))
+    title_size = panel_style.scaled_size(max(14, base // 12), font_scale)
+    body_size = panel_style.scaled_size(max(11, base // 20), font_scale)
+    row_h = body_size + 14
+    box_size = max(10, body_size - 4)
+    header_h = accent_h + 6 + title_size
+    avail_h = target_h - panel_style.GUTTER * 2 - header_h - 8
+    max_rows = max(0, avail_h // row_h)
+
+    owners_seen: list[str] = []
+    rows = []
+    for task in tasks[:max_rows]:
+        colors = _event_colors(task, owners_seen, palette_rgb)
+        done = task.get("completed_at") is not None
+        due = None if done else (_fmt_task_due(task.get("due")) or None)
+        rows.append({
+            "colors": [_rgb_to_hex(c) for c in colors],
+            "done": done,
+            "due": due,
+            "summary": task["summary"],
+        })
+    more_count = max(0, len(tasks) - max_rows)
+
+    template = _jinja_env.get_template("tasks.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, gutter=panel_style.GUTTER,
+        font_regular=theme["font_regular"], font_bold=theme["font_bold"],
+        title=title, header_h=header_h, accent_h=accent_h, title_size=title_size,
+        accent_start=theme["accent_hex"],
+        rows=rows, more_count=more_count, row_h=row_h, box_size=box_size, body_size=body_size,
+    )
+    rendered = render_html_to_image(html, target_w, target_h)
+    gutter = panel_style.GUTTER
+    accent_rect = (gutter, gutter, target_w - gutter, gutter + accent_h)
+    return ordered_dither_regions(rendered, palette_rgb, accent_regions=[(accent_rect, theme["accent_amplitude"])])
+
+
+# --- Static image / whiteboard "modern" style (shared) ---------------------
+
+def build_framed_image(composed: Image.Image, target_w: int, target_h: int,
+                       palette_rgb: list | None = None, theme_name: str | None = None,
+                       widget_kind: str = "static") -> Image.Image:
+    """Wraps an already-composed image (static_image.py/whiteboard.py's
+    own compose_into() output, exactly target_w x target_h, already
+    cropped/fit per that widget's own display_mode) in a rounded-corner,
+    shadowed card -- the first visual chrome either widget type has ever
+    had (both currently draw with zero chrome of their own). Theme-aware
+    for radius/shadow only -- no text/header content to accent or font.
+    Returns an already-palette-exact RGB image (see ordered_dither)."""
+    import base64
+
+    theme = theme_tokens.resolve_theme(theme_name, widget_kind, palette_rgb)
+    buf = io.BytesIO()
+    composed.convert("RGB").save(buf, format="PNG")
+    image_b64 = base64.b64encode(buf.getvalue()).decode("ascii")
+
+    template = _jinja_env.get_template("framed_image.html.jinja")
+    html = template.render(
+        w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=theme["radius"], shadow=theme["shadow"],
+        image_b64=image_b64,
+    )
+    rendered = render_html_to_image(html, target_w, target_h)
+    return ordered_dither(rendered, palette_rgb)
@@ -10,6 +10,72 @@ from PIL import Image, ImageDraw, ImageEnhance, ImageFont, ImageOps
 EPD_WIDTH = 800
 EPD_HEIGHT = 480

+# Registry of every supported panel's native pixel size, keyed by
+# Frame.panel_type. New entries get added here as a new EPD driver
+# component is supported firmware-side (see firmware/components/) --
+# geometry lives in exactly one place rather than as new module-level
+# globals per panel.
+DEFAULT_PANEL_TYPE = "epd7in3e"
+PANEL_SPECS: dict[str, tuple[int, int]] = {
+    "epd7in3e": (EPD_WIDTH, EPD_HEIGHT),
+    # Waveshare's 13.3" e-Paper (E) Spectra 6 panel (270.40x202.80mm,
+    # 1600x1200px, 4:3) driven by Seeed's EE02 board. This is the panel's
+    # MOUNT/marketing size, not its SPI wire raster -- the controller
+    # itself addresses a native 1200x1600 (portrait) raster, rotated 90
+    # degrees from how the panel physically hangs. Both facts are now
+    # vendor-confirmed (see firmware/components/epd13in3e's own docstring)
+    # -- PANEL_SPECS stays in mount/logical terms like the 7.3" panel's
+    # entry (everything upstream of packing -- composition, the widget
+    # grid, face-label placement -- reasons in this space); the wire-raster
+    # rotation is applied only at pack time, see PANEL_WIRE_TRANSPOSE.
+    "epd13in3e": (1600, 1200),
+}
+
+# Panels whose SPI wire raster is rotated 90 degrees from PANEL_SPECS's
+# mount/logical size (see that dict's own comment on epd13in3e). None =
+# wire raster already matches the logical size, no extra rotation (true
+# for the 7.3" panel). Applied in _transpose_and_pack AFTER the
+# user-selected ORIENTATION_TRANSPOSE -- these are two independent
+# rotations for two independent reasons (how the frame is hung vs. a fixed
+# fact about this panel's controller wiring) and must not be conflated.
+#
+# Getting this wrong doesn't just rotate the output image: 1600x1200 and
+# 1200x1600 don't share a row stride (800 bytes/row x 1200 rows vs 600
+# bytes/row x 1600 rows), so packing at the wrong one slices real image
+# rows at the wrong byte offsets and shreds the picture into a repeating
+# diagonal garble on the real panel, not a clean rotation -- see
+# test_transpose_and_pack_epd13in3e_uses_true_wire_raster_stride in
+# tests/test_render_size_invariants.py, which catches exactly that
+# regression without needing real hardware.
+#
+# Direction (ROTATE_90 vs ROTATE_270) is a physical-assembly fact this
+# code can't derive from vendor driver bytes -- it depends on which edge
+# of the panel ends up "up" in this project's frame housing. Picked
+# ROTATE_90 as a documented placeholder; confirm/flip against real
+# hardware once the EE02 firmware target is actually flashed and
+# displaying (a wrong direction shows a rotated/mirrored image, not
+# corruption, so it's safe to ship pending that check).
+PANEL_WIRE_TRANSPOSE: dict[str, "Image.Transpose | None"] = {
+    "epd7in3e": None,
+    "epd13in3e": Image.Transpose.ROTATE_90,
+}
+
+# Human-readable label per PANEL_SPECS key, for the frame settings page's
+# read-only "Panel" line (see routers/device.py's BOARD_PANEL_MAP for how
+# a frame's panel_type actually gets set -- this is display-only).
+PANEL_LABELS: dict[str, str] = {
+    "epd7in3e": '7.3" Spectra 6',
+    "epd13in3e": '13.3" Spectra 6',
+}
+
+
+def panel_size(panel_type: str) -> tuple[int, int]:
+    """(width, height) native pixel size for a Frame.panel_type key.
+    Unknown/blank panel_type (e.g. a frame created before this field
+    existed) falls back to the original 7.3" panel this project shipped
+    with, never raises."""
+    return PANEL_SPECS.get(panel_type, PANEL_SPECS[DEFAULT_PANEL_TYPE])
+
 # PIL's TrueType rendering antialiases by default (graduated gray edge
 # pixels). Those survive straight into _quantize's Floyd-Steinberg
 # dithering, which -- confirmed visually -- turns them into scattered
@@ -61,7 +127,8 @@ def _dotted_edge(draw: ImageDraw.ImageDraw, x0: float, y0: float, x1: float, y1:
        pos += spacing


-def draw_widget_border(img: Image.Image, style: str, thickness: int, color: tuple[int, int, int]) -> None:
+def draw_widget_border(img: Image.Image, style: str, thickness: int, color: tuple[int, int, int],
+                       radius: int = 0) -> None:
    """Draws a border inset within img's own bounds, mutating it in
    place -- called once per widget's own region (routers/device.py's
    _render_widgets, and each widget type's own dialog preview) before
@@ -74,24 +141,44 @@ def draw_widget_border(img: Image.Image, style: str, thickness: int, color: tupl
    "solid"/"dashed"/"dotted" are a single thickness-px stroke traced
    just inside the image's edge; "fancy" is two thinner concentric
    strokes with a gap between them, picture-frame-mat style. "none" (or
-    a non-positive thickness) draws nothing."""
+    a non-positive thickness) draws nothing. `radius` is opt-in and only
+    honored by "solid"/"fancy" (rounded_rectangle instead of rectangle) --
+    "dashed"/"dotted" trace each of the 4 edges as independent straight
+    segments (see _dashed_edge/_dotted_edge) and ignore it, a documented
+    limitation rather than a bug. Defaults to 0 (unchanged sharp-corner
+    behavior) and no call site passes non-zero today -- this ships the
+    capability for a future per-widget "rounded border" setting without
+    changing default behavior anywhere (see tests/test_widget_border.py's
+    exact-corner-pixel assertions)."""
    if style == "none" or thickness <= 0:
        return
    w, h = img.size
    t = max(1, min(int(thickness), min(w, h) // 2))
    draw = ImageDraw.Draw(img)
+    r = max(0, min(radius, (w - 1) // 2, (h - 1) // 2))

    if style == "fancy":
        line_t = max(1, t // 3)
        gap = max(2, t - 2 * line_t)
-        draw.rectangle([0, 0, w - 1, h - 1], outline=color, width=line_t)
+        if r:
+            draw.rounded_rectangle([0, 0, w - 1, h - 1], radius=r, outline=color, width=line_t)
+        else:
+            draw.rectangle([0, 0, w - 1, h - 1], outline=color, width=line_t)
        inset = line_t + gap
        if w - 2 * inset > 1 and h - 2 * inset > 1:
-            draw.rectangle([inset, inset, w - 1 - inset, h - 1 - inset], outline=color, width=line_t)
+            inner_r = max(0, min(r - inset, (w - 1 - 2 * inset) // 2, (h - 1 - 2 * inset) // 2)) if r else 0
+            if inner_r:
+                draw.rounded_rectangle([inset, inset, w - 1 - inset, h - 1 - inset], radius=inner_r,
+                                       outline=color, width=line_t)
+            else:
+                draw.rectangle([inset, inset, w - 1 - inset, h - 1 - inset], outline=color, width=line_t)
        return

    if style == "solid":
-        draw.rectangle([0, 0, w - 1, h - 1], outline=color, width=t)
+        if r:
+            draw.rounded_rectangle([0, 0, w - 1, h - 1], radius=r, outline=color, width=t)
+        else:
+            draw.rectangle([0, 0, w - 1, h - 1], outline=color, width=t)
        return

    # dashed/dotted trace the same centered-on-the-edge path solid/
@@ -125,21 +212,24 @@ ORIENTATION_TRANSPOSE = {
 }


-def logical_render_size(orientation: str) -> tuple[int, int]:
+def logical_render_size(orientation: str, panel_w: int = EPD_WIDTH, panel_h: int = EPD_HEIGHT) -> tuple[int, int]:
    """(width, height) the photo is composed/cropped at for this
-    orientation, before rotating into native panel space."""
+    orientation, before rotating into native panel space. Defaults to the
+    7.3" panel's native size; callers with a Frame in scope should pass
+    *panel_size(frame.panel_type) instead."""
    if orientation in ("portrait", "portrait_flipped"):
-        return EPD_HEIGHT, EPD_WIDTH
-    return EPD_WIDTH, EPD_HEIGHT
+        return panel_h, panel_w
+    return panel_w, panel_h


-def logical_to_native(x: float, y: float, orientation: str) -> tuple[int, int]:
+def logical_to_native(x: float, y: float, orientation: str,
+                      panel_w: int = EPD_WIDTH, panel_h: int = EPD_HEIGHT) -> tuple[int, int]:
    """Maps a point in logical (pre-rotation) frame space to native
-    800x480 panel space, applying the same rotation ORIENTATION_TRANSPOSE
-    applies to the pixels -- anything positioned in logical coordinates
-    (e.g. face labels) needs this to stay attached to the rotated
-    content. PIL's ROTATE_90 is counterclockwise; ROTATE_270 clockwise."""
-    logical_w, logical_h = logical_render_size(orientation)
+    panel space, applying the same rotation ORIENTATION_TRANSPOSE applies
+    to the pixels -- anything positioned in logical coordinates (e.g.
+    face labels) needs this to stay attached to the rotated content.
+    PIL's ROTATE_90 is counterclockwise; ROTATE_270 clockwise."""
+    logical_w, logical_h = logical_render_size(orientation, panel_w, panel_h)
    if orientation == "landscape_flipped":
        return int(logical_w - 1 - x), int(logical_h - 1 - y)
    if orientation == "portrait":  # ROTATE_90 (CCW)
@@ -166,10 +256,35 @@ DEFAULT_PALETTE_RGB = [

 PALETTE_LABELS = ["Black", "White", "Yellow", "Red", "Blue", "Green"]

-# The panel's actual 4-bit color codes (see firmware/components/epd7in3e),
-# in the same order as DEFAULT_PALETTE_RGB/PALETTE_LABELS -- fixed by the
-# hardware protocol, never user-configurable. 0x4 is intentionally unused
-# upstream.
+# A community-measured alternative starting point for the same 6 slots,
+# ported (data only, not code) from paperlesspaper/epdoptimize's
+# src/dither/data/default-palettes.json "spectra6" entry (Apache
+# License 2.0, https://github.com/paperlesspaper/epdoptimize) -- offered
+# as a one-click "Load calibrated preset" in the Advanced configuration
+# UI, not a new default: unlike DEFAULT_PALETTE_RGB above, these are an
+# actual panel's measured appearance rather than idealized primaries
+# (real Spectra 6 white/black are notably duller than pure #fff/#000),
+# but measured from a different unit than any given frame's actual
+# panel -- panel_style.py's own docstring already notes units vary
+# enough to be worth calibrating per frame, and this hasn't been
+# verified against this project's own hardware.
+CALIBRATED_SPECTRA6_RGB = [
+    (0x1F, 0x22, 0x26),  # BLACK
+    (0xB9, 0xC7, 0xC9),  # WHITE
+    (0xC1, 0xBB, 0x1E),  # YELLOW
+    (0x62, 0x20, 0x1E),  # RED
+    (0x23, 0x3F, 0x8E),  # BLUE
+    (0x35, 0x56, 0x3A),  # GREEN
+]
+
+# The 7.3" panel's actual 4-bit color codes (see
+# firmware/components/epd7in3e), in the same order as DEFAULT_PALETTE_RGB/
+# PALETTE_LABELS -- fixed by the hardware protocol, never user-
+# configurable. 0x4 is intentionally unused upstream. Used unconditionally
+# for every panel_type today -- confirmed (not just assumed) that the
+# 13.3" panel's controller uses the identical codes, from the same vendor
+# driver sources as PANEL_SPECS["epd13in3e"]'s own comment, so no
+# panel-specific table is needed here.
 PANEL_CODES = [0x0, 0x1, 0x2, 0x3, 0x5, 0x6]

 # Per-widget optional border (models.Widget.border_style, see
@@ -386,11 +501,13 @@ def compose_into(source: Image.Image, faces: list[dict] | None, target_w: int, t
    return ImageOps.fit(fitted, (target_w, target_h), method=Image.LANCZOS)  # crop_fill, or crop_faces w/ no faces


-def _compose(source: Image.Image, faces: list[dict] | None, orientation: str, display_mode: str) -> Image.Image:
+def _compose(source: Image.Image, faces: list[dict] | None, orientation: str, display_mode: str,
+            panel_w: int = EPD_WIDTH, panel_h: int = EPD_HEIGHT) -> Image.Image:
    """Crop/resize/letterbox `source` per display_mode -- returns an RGB
-    image at logical_render_size(orientation), before enhancement or
-    quantization. See render_frame for what each display_mode does."""
-    return compose_into(source, faces, *logical_render_size(orientation), display_mode)
+    image at logical_render_size(orientation, panel_w, panel_h), before
+    enhancement or quantization. See render_frame for what each
+    display_mode does."""
+    return compose_into(source, faces, *logical_render_size(orientation, panel_w, panel_h), display_mode)


 def _enhance(img: Image.Image, color_boost: float, contrast_boost: float) -> Image.Image:
@@ -420,19 +537,34 @@ def _quantize(img: Image.Image, palette_rgb: list | None, dither_strength: float
    return blended.quantize(palette=palette_image, dither=Image.Dither.FLOYDSTEINBERG)


-def _transpose_and_pack(quantized: Image.Image, orientation: str) -> bytes:
+def _transpose_and_pack(quantized: Image.Image, orientation: str,
+                        panel_type: str = DEFAULT_PANEL_TYPE) -> bytes:
    """Rotates a logical-space quantized image into native panel space
-    and packs it 2 pixels/byte the way epd7in3e.c expects. Always
-    returns exactly EPD_WIDTH*EPD_HEIGHT/2 bytes."""
+    and packs it 2 pixels/byte the way the panel's EPD driver expects
+    (see firmware/components/epd7in3e). Returns exactly width*height/2
+    bytes for whatever native size `quantized` actually is post-rotation
+    -- the canvas was already built at the calling frame's own panel size
+    (see panel_size()), so this derives dimensions from the image itself
+    rather than a fixed global.
+
+    Two independent rotations happen here, in order: ORIENTATION_TRANSPOSE
+    (how the frame is physically hung -- a per-frame user choice), then
+    PANEL_WIRE_TRANSPOSE (a fixed fact about this panel_type's SPI wire
+    raster vs. its mount size -- see that dict's own comment). Most panels
+    need only the first; epd13in3e needs both."""
    transpose = ORIENTATION_TRANSPOSE.get(orientation)
    if transpose is not None:
        quantized = quantized.transpose(transpose)
+    wire_transpose = PANEL_WIRE_TRANSPOSE.get(panel_type)
+    if wire_transpose is not None:
+        quantized = quantized.transpose(wire_transpose)
    pixels = quantized.load()
+    w, h = quantized.size

-    out = bytearray(EPD_WIDTH * EPD_HEIGHT // 2)
+    out = bytearray(w * h // 2)
    i = 0
-    for y in range(EPD_HEIGHT):
-        for x in range(0, EPD_WIDTH, 2):
+    for y in range(h):
+        for x in range(0, w, 2):
            left = PANEL_CODES[pixels[x, y]]
            right = PANEL_CODES[pixels[x + 1, y]]
            out[i] = (left << 4) | right
@@ -459,11 +591,11 @@ def render_frame(source: Image.Image, faces: list[dict] | None = None,
                 orientation: str = "landscape", palette_rgb: list | None = None,
                 display_mode: str = DEFAULT_DISPLAY_MODE, color_boost: float = 1.0,
                 contrast_boost: float = 1.0, dither_strength: float = 1.0,
-                 manage: dict | None = None) -> bytes:
+                 manage: dict | None = None, panel_type: str = DEFAULT_PANEL_TYPE) -> bytes:
    """Fits `source` to the panel's resolution, applies color/contrast
    enhancement, quantizes it to the 6-color palette, and packs 2
-    pixels/byte the way epd7in3e.c expects. Always returns exactly
-    EPD_WIDTH*EPD_HEIGHT/2 bytes.
+    pixels/byte the way the target panel_type's EPD driver expects.
+    Returns exactly width*height/2 bytes for that panel (see panel_size).

    `display_mode` (see DISPLAY_MODES) picks how the photo's aspect ratio
    is reconciled with the panel's: crop_fill (center-crop to fill,
@@ -489,16 +621,30 @@ def render_frame(source: Image.Image, faces: list[dict] | None = None,
    which callers pass this straight through from. Applied after
    enhancement, before quantization, so the overlay's pure black/white
    graphics aren't affected by color/contrast boost.
+
+    `panel_type` (see Frame.panel_type/panel_size) picks which panel's
+    native resolution to render for -- None/unrecognized falls back to
+    the original 7.3" panel.
    """
-    fitted = _enhance(_compose(source, faces, orientation, display_mode), color_boost, contrast_boost)
+    panel_w, panel_h = panel_size(panel_type)
+    fitted = _enhance(_compose(source, faces, orientation, display_mode, panel_w, panel_h),
+                      color_boost, contrast_boost)
    fitted = _apply_manage_overlay(fitted, manage)
    quantized = _quantize(fitted, palette_rgb, dither_strength)
-    return _transpose_and_pack(quantized, orientation)
+    return _transpose_and_pack(quantized, orientation, panel_type)
+
+
+def _png_bytes(img: Image.Image) -> bytes:
+    buf = io.BytesIO()
+    img.convert("RGB").save(buf, format="PNG")
+    return buf.getvalue()


 def render_panel(regions: list[tuple[tuple[int, int, int, int], Image.Image]], orientation: str = "landscape",
                 palette_rgb: list | None = None, color_boost: float = 1.0, contrast_boost: float = 1.0,
-                 dither_strength: float = 1.0, manage: dict | None = None, as_png: bool = False) -> bytes:
+                 dither_strength: float = 1.0, manage: dict | None = None, as_png: bool = False,
+                 capture_snapshot: bool = False,
+                 panel_type: str = DEFAULT_PANEL_TYPE) -> bytes | tuple[bytes, bytes]:
    """The widget system's compositor -- generalizes render_frame's tail
    (paste, enhance once, overlay once, quantize once, pack once) from
    "compose one photo" to "paste N already-rendered regions, then run
@@ -530,8 +676,21 @@ def render_panel(regions: list[tuple[tuple[int, int, int, int], Image.Image]], o
    as_png=True returns a normal browser-viewable PNG in logical (upright)
    orientation instead of packed native-panel bytes, same convention as
    render_preview_png -- used for the web UI's live "how it's displaying"
-    thumbnail."""
-    logical_w, logical_h = logical_render_size(orientation)
+    thumbnail.
+
+    capture_snapshot=True (only meaningful alongside as_png=False) returns
+    (packed_bytes, png_bytes) instead of just packed_bytes -- both derived
+    from the same already-quantized canvas, so a device-facing render can
+    also persist a browser-viewable copy (see routers/device.py's
+    _record_last_displayed) without re-running composition/quantization a
+    second time.
+
+    `panel_type` (see Frame.panel_type/panel_size) picks the target
+    panel's native resolution -- callers must have computed `regions`'
+    rects against this same panel's logical_render_size (see
+    routers/device.py's _render_widgets, which always derives both from
+    the same frame.panel_type)."""
+    logical_w, logical_h = logical_render_size(orientation, *panel_size(panel_type))
    canvas = Image.new("RGB", (logical_w, logical_h), LETTERBOX_BG)
    for (x, y, w, h), region_img in regions:
        canvas.paste(region_img.convert("RGB"), (x, y))
@@ -540,33 +699,36 @@ def render_panel(regions: list[tuple[tuple[int, int, int, int], Image.Image]], o
    fitted = _apply_manage_overlay(fitted, manage)
    quantized = _quantize(fitted, palette_rgb, dither_strength)
    if as_png:
-        buf = io.BytesIO()
-        quantized.convert("RGB").save(buf, format="PNG")
-        return buf.getvalue()
-    return _transpose_and_pack(quantized, orientation)
+        return _png_bytes(quantized)
+    packed = _transpose_and_pack(quantized, orientation, panel_type)
+    if capture_snapshot:
+        return packed, _png_bytes(quantized)
+    return packed


 def render_preview_png(source: Image.Image, faces: list[dict] | None = None,
                       orientation: str = "landscape", palette_rgb: list | None = None,
                       display_mode: str = DEFAULT_DISPLAY_MODE, color_boost: float = 1.0,
                       contrast_boost: float = 1.0, dither_strength: float = 1.0,
-                       manage: dict | None = None) -> bytes:
+                       manage: dict | None = None, panel_type: str = DEFAULT_PANEL_TYPE) -> bytes:
    """Identical composition/enhancement/quantization pipeline as
    render_frame, but returned as a normal browser-viewable PNG in
    logical (upright, as-the-frame-actually-hangs) orientation rather
    than packed native-panel bytes and rotation -- what the web UI's
    "how it will look on the frame" preview shows."""
-    fitted = _enhance(_compose(source, faces, orientation, display_mode), color_boost, contrast_boost)
+    panel_w, panel_h = panel_size(panel_type)
+    fitted = _enhance(_compose(source, faces, orientation, display_mode, panel_w, panel_h),
+                      color_boost, contrast_boost)
    fitted = _apply_manage_overlay(fitted, manage)
    quantized = _quantize(fitted, palette_rgb, dither_strength)
-    buf = io.BytesIO()
-    quantized.convert("RGB").save(buf, format="PNG")
-    return buf.getvalue()
+    return _png_bytes(quantized)


 def render_placeholder(lines: list[str], qr_url: str | None = None,
                       orientation: str = "landscape", palette_rgb: list | None = None,
-                       manage: dict | None = None, as_png: bool = False) -> bytes:
+                       manage: dict | None = None, as_png: bool = False,
+                       capture_snapshot: bool = False,
+                       panel_type: str = DEFAULT_PANEL_TYPE) -> bytes | tuple[bytes, bytes]:
    """A readable full-panel message (plus an optional QR code) in the
    same packed format as render_frame -- what /frame/image serves for a
    frame that isn't claimed or configured yet, so a fresh device shows
@@ -574,9 +736,10 @@ def render_placeholder(lines: list[str], qr_url: str | None = None,

    `manage`, same as render_frame's -- lets the manage button still work
    (at minimum, the scan-to-manage QR) on a frame that isn't configured
-    yet."""
+    yet. `capture_snapshot`, same as render_panel's -- (packed, png)
+    instead of just packed. `panel_type`, same as render_frame's."""
    margin = 24
-    logical_w, logical_h = logical_render_size(orientation)
+    logical_w, logical_h = logical_render_size(orientation, *panel_size(panel_type))
    img = Image.new("RGB", (logical_w, logical_h), (255, 255, 255))
    draw = ImageDraw.Draw(img)  # measurement only (textbbox/textlength) -- painting goes through draw_text

@@ -638,7 +801,8 @@ def render_placeholder(lines: list[str], qr_url: str | None = None,
    img = _apply_manage_overlay(img, manage)
    quantized = _quantize(img, palette_rgb, dither_strength=1.0)
    if as_png:
-        buf = io.BytesIO()
-        quantized.convert("RGB").save(buf, format="PNG")
-        return buf.getvalue()
-    return _transpose_and_pack(quantized, orientation)
+        return _png_bytes(quantized)
+    packed = _transpose_and_pack(quantized, orientation, panel_type)
+    if capture_snapshot:
+        return packed, _png_bytes(quantized)
+    return packed
@@ -0,0 +1,34 @@
+"""Root-logger configuration: a rotating file handler under the same
+/data volume as the sqlite DB and legacy config.json, so the admin log
+viewer has something to read and log content survives container
+restarts -- a redeploy happens on every push to main touching
+server/**, which would make an in-memory-only log buffer nearly
+useless in practice. Before this, the root logger had no handler at
+all, so every module's logger.info() call (user creation, claims,
+password resets, ...) was silently dropped rather than merely
+un-viewable -- this fixes that too, not just adds a viewer."""
+
+from __future__ import annotations
+
+import logging
+import os
+from logging.handlers import RotatingFileHandler
+from pathlib import Path
+
+LOG_PATH = Path(os.environ.get("LOG_PATH", "/data/server.log"))
+
+
+def configure_logging() -> None:
+    LOG_PATH.parent.mkdir(parents=True, exist_ok=True)
+    handler = RotatingFileHandler(LOG_PATH, maxBytes=2_000_000, backupCount=3)
+    handler.setFormatter(logging.Formatter("%(asctime)s %(levelname)s %(name)s: %(message)s"))
+    root = logging.getLogger()
+    root.addHandler(handler)
+    root.setLevel(os.environ.get("LOG_LEVEL", "INFO"))
+
+
+def read_log_tail(lines: int) -> str:
+    if not LOG_PATH.exists():
+        return ""
+    text = LOG_PATH.read_text(errors="replace")
+    return "\n".join(text.splitlines()[-lines:])
@@ -16,14 +16,16 @@ pre-database config.json deployment on first boot."""
 from __future__ import annotations

 import logging
+import time
+from contextlib import asynccontextmanager

 from fastapi import FastAPI, Request
-from fastapi.responses import HTMLResponse, RedirectResponse
+from fastapi.responses import FileResponse, HTMLResponse, RedirectResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from sqlalchemy import select

-from . import migration
+from . import html_render, logging_setup, migration
 from .auth import (
    browser_token_valid,
    current_user,
@@ -38,12 +40,53 @@ from .routers.common import shell_context

 logger = logging.getLogger(__name__)

+# Before anything else logs: a handler exists to catch it, and it lands in
+# the same persistent volume the admin log viewer reads from.
+logging_setup.configure_logging()
+
 # Schema + legacy-config import, before the first request is served.
 migration.run_migrations()

-app = FastAPI(title="ESPresso Frame Server")
+@asynccontextmanager
+async def _lifespan(app: FastAPI):
+    """Startup does nothing browser-related -- html_render.start() is
+    lazy (only the weather widget's opt-in "modern" render style ever
+    triggers it, see that module's docstring), so a deployment that
+    never uses it never launches Chromium or needs Playwright's browser
+    binaries installed. Shutdown calls html_render.stop() unconditionally
+    (a no-op if it was never started) so a server restart never leaves
+    an orphaned Chromium process running."""
+    yield
+    html_render.stop()
+
+
+app = FastAPI(title="ESPresso Frame Server", lifespan=_lifespan)
 templates = Jinja2Templates(directory="app/templates")

+
+@app.middleware("http")
+async def log_device_requests(request: Request, call_next):
+    """Access log for the firmware-facing /frame/* protocol -- the admin
+    log viewer otherwise only ever shows exceptions (device.py logs
+    those, not successful requests), so a slow-but-200 request or a
+    device hammering a stale/wrong token leaves no trace at all. Logs
+    the device id (query param, not the token -- never log credentials)
+    and wall time, which is exactly what's needed to spot a request that
+    blew past the firmware's fixed HTTP timeout without technically
+    failing server-side."""
+    if not request.url.path.startswith("/frame/"):
+        return await call_next(request)
+    start = time.monotonic()
+    device_id = request.query_params.get("id", "") or "-"
+    response = await call_next(request)
+    elapsed_ms = (time.monotonic() - start) * 1000
+    logger.info(
+        "%s %s id=%s -> %d (%.0fms)",
+        request.method, request.url.path, device_id, response.status_code, elapsed_ms,
+    )
+    return response
+
+
 app.mount("/static", StaticFiles(directory="app/static"), name="static")

 app.include_router(device.router)
@@ -60,26 +103,23 @@ def health() -> dict:
    return {"status": "ok"}


-def _device_credential_redirect(request: Request, db, allow_legacy: bool) -> str | None:
+@app.get("/sw.js")
+def service_worker() -> FileResponse:
+    # Served from / rather than /static/sw.js so its default scope is the
+    # whole app -- a SW can only ever control paths at or below its own URL.
+    return FileResponse("app/static/sw.js", media_type="application/javascript")
+
+
+def _device_credential_redirect(request: Request, db) -> str | None:
    """The on-frame manage QR points at the server root with the device's
-    own credentials (new firmware: ?id=&token=; deployed firmware:
-    ?token=<legacy shared token>). Those scans get the frame's limited
-    manage page -- never the full UI, which requires a login.
-    allow_legacy is False before /setup has run: at that point a bare
-    ?token= hit is the admin coming through the token prompt to do
-    first-run setup, not a QR scan."""
+    own credentials (?id=&token=). Those scans get the frame's limited
+    manage page -- never the full UI, which requires a login."""
    device_id = request.query_params.get("id", "").strip().lower()
    token = request.query_params.get("token", "")
    if device_id and token:
        frame = db.scalars(select(Frame).where(Frame.device_id == device_id)).first()
        if frame is not None and token == frame.device_token:
            return f"/m/{frame.manage_token}"
-    if allow_legacy and token and management_token() and token == management_token():
-        frame = db.scalars(
-            select(Frame).where(Frame.legacy_token_enabled == True)  # noqa: E712
-        ).first()
-        if frame is not None:
-            return f"/m/{frame.manage_token}"
    return None


@@ -90,7 +130,7 @@ def index(request: Request):
    else is walked through setup/login."""
    with SessionLocal() as db:
        have_users = users_exist(db)
-        manage_redirect = _device_credential_redirect(request, db, allow_legacy=have_users)
+        manage_redirect = _device_credential_redirect(request, db)
        if manage_redirect is not None:
            return RedirectResponse(manage_redirect, status_code=303)

@@ -14,7 +14,8 @@ from __future__ import annotations

 from PIL import Image, ImageDraw, ImageFont

-from .image_pipeline import DEFAULT_PALETTE_RGB, draw_text
+from . import panel_style
+from .image_pipeline import draw_text

 PADDING = 16
 QR_TEXT_GAP = 8
@@ -27,9 +28,12 @@ BODY_FONT_SIZE = 20

 BATTERY_ICON_W = 40
 BATTERY_ICON_H = 22
-BATTERY_ICON_STROKE = 2
+# Stroke/nub width/height are no longer fixed constants here -- panel_
+# style.draw_battery_icon derives them from icon_w/icon_h itself (same
+# formula widgets/battery.py's own icon already used). BATTERY_NUB_W
+# below is kept only as this box's own outer-width estimate, not fed
+# into the icon drawing itself.
 BATTERY_NUB_W = 5
-BATTERY_NUB_H = 10
 BATTERY_ICON_TEXT_GAP = 8
 BATTERY_REGION_GAP = 8  # vertical gap below the manage QR box

@@ -37,10 +41,6 @@ FACE_LABEL_PADDING = 8
 FACE_LABEL_GAP = 4  # distance from the face's anchor point to the label box


-def _font(size: int) -> ImageFont.ImageFont:
-    return ImageFont.load_default(size=size)
-
-
 def _qr_image(url: str, target_px: int = QR_TARGET_PX) -> Image.Image:
    import qrcode

@@ -52,7 +52,7 @@ def _qr_image(url: str, target_px: int = QR_TARGET_PX) -> Image.Image:
    return raw.resize((raw.width * scale, raw.height * scale), Image.NEAREST)


-def _text_box(draw: ImageDraw.ImageDraw, lines: list[str], font: ImageFont.ImageFont) -> tuple[int, int]:
+def _text_box(draw: ImageDraw.ImageDraw, lines: list[str], font: ImageFont.FreeTypeFont) -> tuple[int, int]:
    """(width, height) of `lines` stacked with LINE_GAP between them, at
    `font` -- the box _draw_text_box below will need."""
    w = 0
@@ -64,7 +64,7 @@ def _text_box(draw: ImageDraw.ImageDraw, lines: list[str], font: ImageFont.Image
    return w, h


-def _draw_centered_lines(img: Image.Image, draw: ImageDraw.ImageDraw, lines: list[str], font: ImageFont.ImageFont,
+def _draw_centered_lines(img: Image.Image, draw: ImageDraw.ImageDraw, lines: list[str], font: ImageFont.FreeTypeFont,
                         center_x: int, top: int) -> None:
    y = top
    for line in lines:
@@ -82,7 +82,8 @@ def _draw_qr_box(img: Image.Image, draw: ImageDraw.ImageDraw, url: str, caption:
    (the battery, below the manage QR) use it instead of recomputing the
    same geometry a second time."""
    qr_img = _qr_image(url)
-    text_w, text_h = _text_box(draw, caption, _font(TITLE_FONT_SIZE)) if caption else (0, 0)
+    caption_font = panel_style.font_bold(TITLE_FONT_SIZE)
+    text_w, text_h = _text_box(draw, caption, caption_font) if caption else (0, 0)
    content_w = max(qr_img.width, text_w)
    content_h = qr_img.height + (QR_TEXT_GAP + text_h if caption else 0)

@@ -90,24 +91,26 @@ def _draw_qr_box(img: Image.Image, draw: ImageDraw.ImageDraw, url: str, caption:
    h = content_h + PADDING * 2
    x0, y0 = _corner_origin(img.size, (w, h), corner)

-    draw.rectangle([x0, y0, x0 + w, y0 + h], fill=(255, 255, 255), outline=(0, 0, 0))
+    draw.rounded_rectangle([x0, y0, x0 + w, y0 + h], radius=panel_style.CHIP_RADIUS,
+                           fill=(255, 255, 255), outline=(0, 0, 0))
    center_x = x0 + w // 2
    img.paste(qr_img, (center_x - qr_img.width // 2, y0 + PADDING))
    if caption:
-        _draw_centered_lines(img, draw, caption, _font(TITLE_FONT_SIZE), center_x, y0 + PADDING + qr_img.height + QR_TEXT_GAP)
+        _draw_centered_lines(img, draw, caption, caption_font, center_x, y0 + PADDING + qr_img.height + QR_TEXT_GAP)
    return x0, y0, w, h


 def _draw_text_box(img: Image.Image, draw: ImageDraw.ImageDraw, lines: list[str], corner: str) -> None:
    """White-padded box with centered text lines, placed in one of the
    panel's four corners."""
-    font = _font(BODY_FONT_SIZE)
+    font = panel_style.font_regular(BODY_FONT_SIZE)
    text_w, text_h = _text_box(draw, lines, font)
    w = text_w + PADDING * 2
    h = text_h + PADDING * 2
    x0, y0 = _corner_origin(img.size, (w, h), corner)

-    draw.rectangle([x0, y0, x0 + w, y0 + h], fill=(255, 255, 255), outline=(0, 0, 0))
+    draw.rounded_rectangle([x0, y0, x0 + w, y0 + h], radius=panel_style.CHIP_RADIUS,
+                           fill=(255, 255, 255), outline=(0, 0, 0))
    _draw_centered_lines(img, draw, lines, font, x0 + w // 2, y0 + PADDING)


@@ -123,34 +126,17 @@ def _corner_origin(img_size: tuple[int, int], box_size: tuple[int, int], corner:
    return img_w - PANEL_MARGIN - box_w, img_h - PANEL_MARGIN - box_h  # bottom-right


-# DEFAULT_PALETTE_RGB order is [BLACK, WHITE, YELLOW, RED, BLUE, GREEN]
-# (see image_pipeline.PANEL_CODES) -- picked by level so the fill itself
-# carries the "how worried should I be" signal, not just the number next
-# to it. Thresholds match the low-battery-alert spirit elsewhere in this
-# project (not tied to a frame's own configured alert threshold, since
-# this glyph has to make sense with no configuration at all).
-_BATTERY_LOW = DEFAULT_PALETTE_RGB[3]  # red
-_BATTERY_MEDIUM = DEFAULT_PALETTE_RGB[2]  # yellow
-_BATTERY_HIGH = DEFAULT_PALETTE_RGB[5]  # green
-
-
-def _battery_fill_color(percent: int) -> tuple[int, int, int]:
-    if percent <= 15:
-        return _BATTERY_LOW
-    if percent <= 40:
-        return _BATTERY_MEDIUM
-    return _BATTERY_HIGH
-
-
 def _draw_battery(img: Image.Image, draw: ImageDraw.ImageDraw, percent: int, anchor_x0: int, anchor_y0: int,
                  anchor_w: int, anchor_h: int) -> None:
-    """Battery glyph (now actually filled to `percent`, not just a static
-    outline -- easy now that this renders server-side instead of being a
-    fixed bitmap firmware drew) + "NN%" text, right-aligned under the
-    given anchor box (the manage QR box) -- a sensible default position,
-    not a constraint anything else has to route around; move this call
-    site's arguments to place it anywhere else instead."""
-    font = _font(BODY_FONT_SIZE)
+    """Battery glyph + "NN%" text, right-aligned under the given anchor
+    box (the manage QR box) -- a sensible default position, not a
+    constraint anything else has to route around; move this call site's
+    arguments to place it anywhere else instead. The glyph itself is
+    panel_style.draw_battery_icon -- the one shared implementation
+    replacing what used to be a second, independent copy of widgets/
+    battery.py's own icon-drawing code (same shape, same red/yellow/
+    green thresholds, previously kept in sync by convention only)."""
+    font = panel_style.font_regular(BODY_FONT_SIZE)
    text = f"{percent}%"
    icon_total_w = BATTERY_ICON_W + BATTERY_NUB_W
    text_w = draw.textlength(text, font=font)
@@ -162,22 +148,14 @@ def _draw_battery(img: Image.Image, draw: ImageDraw.ImageDraw, percent: int, anc
    x0 = anchor_x0 + anchor_w - w
    y0 = anchor_y0 + anchor_h + BATTERY_REGION_GAP

-    draw.rectangle([x0, y0, x0 + w, y0 + h], fill=(255, 255, 255), outline=(0, 0, 0))
+    draw.rounded_rectangle([x0, y0, x0 + w, y0 + h], radius=panel_style.CHIP_RADIUS,
+                           fill=(255, 255, 255), outline=(0, 0, 0))

    icon_x = x0 + PADDING
    icon_y = y0 + PADDING + (content_h - BATTERY_ICON_H) // 2
-    inner_x0, inner_y0 = icon_x + BATTERY_ICON_STROKE, icon_y + BATTERY_ICON_STROKE
-    inner_x1, inner_y1 = icon_x + BATTERY_ICON_W - BATTERY_ICON_STROKE, icon_y + BATTERY_ICON_H - BATTERY_ICON_STROKE
-    fill_x1 = inner_x0 + round((inner_x1 - inner_x0) * (percent / 100))
-    if fill_x1 > inner_x0:
-        draw.rectangle([inner_x0, inner_y0, fill_x1, inner_y1], fill=_battery_fill_color(percent))
-    draw.rectangle([icon_x, icon_y, icon_x + BATTERY_ICON_W, icon_y + BATTERY_ICON_H], outline=(0, 0, 0),
-                   width=BATTERY_ICON_STROKE)
-    nub_y = icon_y + (BATTERY_ICON_H - BATTERY_NUB_H) // 2
-    draw.rectangle([icon_x + BATTERY_ICON_W, nub_y, icon_x + BATTERY_ICON_W + BATTERY_NUB_W, nub_y + BATTERY_NUB_H],
-                   fill=(0, 0, 0))
+    panel_style.draw_battery_icon(draw, icon_x, icon_y, BATTERY_ICON_W, BATTERY_ICON_H, percent)
    draw_text(img, (icon_x + icon_total_w + BATTERY_ICON_TEXT_GAP, y0 + PADDING + (content_h - font.size) // 2),
-             text, font)
+             text, font, panel_style.battery_fill_color(percent))


 def _draw_face_label(img: Image.Image, draw: ImageDraw.ImageDraw, name: str, anchor_x: int, anchor_y: int) -> None:
@@ -185,7 +163,7 @@ def _draw_face_label(img: Image.Image, draw: ImageDraw.ImageDraw, name: str, anc
    anchor_y) point, flipped above if there's no room below, clamped to
    stay fully on-panel -- unlike the four corner boxes (always in-bounds
    by construction), a face can be anywhere, including near an edge."""
-    font = _font(BODY_FONT_SIZE)
+    font = panel_style.font_regular(BODY_FONT_SIZE)
    text_w = draw.textlength(name, font=font)
    bbox = draw.textbbox((0, 0), name, font=font)
    text_h = bbox[3] - bbox[1]
@@ -201,7 +179,8 @@ def _draw_face_label(img: Image.Image, draw: ImageDraw.ImageDraw, name: str, anc
    x0 = max(0, min(x0, img_w - w))
    y0 = max(0, min(y0, img_h - h))

-    draw.rectangle([x0, y0, x0 + w, y0 + h], fill=(255, 255, 255), outline=(0, 0, 0))
+    draw.rounded_rectangle([x0, y0, x0 + w, y0 + h], radius=panel_style.CHIP_RADIUS,
+                           fill=(255, 255, 255), outline=(0, 0, 0))
    draw_text(img, (x0 + FACE_LABEL_PADDING, y0 + FACE_LABEL_PADDING - bbox[1]), name, font)


@@ -22,13 +22,9 @@ from .db import SessionLocal, engine
 from .models import (
    Base,
    BatteryLog,
-    CalendarWidgetConfig,
    Frame,
-    FrameTaskList,
    PhotoWidgetConfig,
    ServerSettings,
-    TaskWidgetConfig,
-    WhiteboardWidgetConfig,
    Widget,
 )
 from .widgets import default_button_actions
@@ -774,6 +770,405 @@ def _migration_29(conn) -> None:
        conn.execute(text("ALTER TABLE frames ADD COLUMN last_cycled_layout_id INTEGER"))


+def _migration_30(conn) -> None:
+    """"Now displaying" (models.Frame.last_displayed_image/
+    last_displayed_at) -- the web UI's header preview pair needs a frozen
+    record of exactly what the last device-facing render actually sent,
+    separate from the always-live "up next" re-render (see
+    routers/device.py's _record_last_displayed, api_frames.py's
+    /now-displaying endpoint). NULL/0.0 for every existing frame until
+    its next real device fetch -- no behavior change to what's served,
+    only a new thing recorded alongside it.
+
+    Guarded per-column, same reasoning as migration 26/27/29's own
+    comments: frames is a table test_migrations.py's pre-widget-system
+    replay tests leave un-dropped, so it keeps the fresh-install
+    create_all() copy -- which already has these columns -- when those
+    tests replay migrations 17+ from schema_version 16. Without the
+    guard, replaying this migration there re-adds a column that's already
+    there and SQLite raises "duplicate column name"."""
+    existing = {c["name"] for c in inspect(conn).get_columns("frames")}
+    if "last_displayed_image" not in existing:
+        conn.execute(text("ALTER TABLE frames ADD COLUMN last_displayed_image BLOB"))
+    if "last_displayed_at" not in existing:
+        conn.execute(text("ALTER TABLE frames ADD COLUMN last_displayed_at REAL NOT NULL DEFAULT 0.0"))
+
+
+def _migration_31(conn) -> None:
+    """Weather widget render style (models.WeatherWidgetConfig.
+    render_style): "classic" (existing hand-drawn PIL renderer,
+    unchanged) or "modern" (app/html_render.py's headless-Chromium/CSS
+    renderer). Every existing weather widget defaults to "classic" --
+    no behavior change until a widget's dialog switches it.
+
+    Guarded per-column, same reasoning as migration 30's own comment:
+    weather_widget_configs is a table some replay tests may re-create
+    fresh via create_all() (which already has this column) rather than
+    replaying migration 24's raw CREATE TABLE."""
+    existing = {c["name"] for c in inspect(conn).get_columns("weather_widget_configs")}
+    if "render_style" not in existing:
+        conn.execute(text("ALTER TABLE weather_widget_configs ADD COLUMN render_style TEXT NOT NULL DEFAULT 'classic'"))
+
+
+def _migration_32(conn) -> None:
+    """Photos widget's own independent palette/dithering (models.Frame.
+    photo_palette_rgb/photo_dither_strength -- see widgets/photos.py's
+    render()). NULL/1.0 defaults reproduce the exact previous rendering
+    (same reference palette/strength as the main fields) until a frame's
+    Configuration tab sets them differently.
+
+    Guarded per-column, same reasoning as migration 30/31's own comments."""
+    existing = {c["name"] for c in inspect(conn).get_columns("frames")}
+    if "photo_palette_rgb" not in existing:
+        conn.execute(text("ALTER TABLE frames ADD COLUMN photo_palette_rgb TEXT"))
+    if "photo_dither_strength" not in existing:
+        conn.execute(text("ALTER TABLE frames ADD COLUMN photo_dither_strength REAL NOT NULL DEFAULT 1.0"))
+
+
+def _migration_33(conn) -> None:
+    """Battery widget render style (models.BatteryWidgetConfig.
+    render_style) -- same shape as migration 31's weather one. Every
+    existing battery widget defaults to "classic", no behavior change."""
+    existing = {c["name"] for c in inspect(conn).get_columns("battery_widget_configs")}
+    if "render_style" not in existing:
+        conn.execute(text("ALTER TABLE battery_widget_configs ADD COLUMN render_style TEXT NOT NULL DEFAULT 'classic'"))
+
+
+def _migration_34(conn) -> None:
+    """Text widget render style (models.TextWidgetConfig.render_style) --
+    same shape as migration 31/33. Every existing text widget defaults to
+    "classic", no behavior change."""
+    existing = {c["name"] for c in inspect(conn).get_columns("text_widget_configs")}
+    if "render_style" not in existing:
+        conn.execute(text("ALTER TABLE text_widget_configs ADD COLUMN render_style TEXT NOT NULL DEFAULT 'classic'"))
+
+
+def _migration_35(conn) -> None:
+    """Tasks widget render style (models.TaskWidgetConfig.render_style)
+    -- same shape as migration 31/33/34. Every existing tasks widget
+    defaults to "classic", no behavior change."""
+    existing = {c["name"] for c in inspect(conn).get_columns("task_widget_configs")}
+    if "render_style" not in existing:
+        conn.execute(text("ALTER TABLE task_widget_configs ADD COLUMN render_style TEXT NOT NULL DEFAULT 'classic'"))
+
+
+def _migration_36(conn) -> None:
+    """Static image widget render style (models.StaticWidgetConfig.
+    render_style) -- same shape as migration 31/33/34/35."""
+    existing = {c["name"] for c in inspect(conn).get_columns("static_widget_configs")}
+    if "render_style" not in existing:
+        conn.execute(text("ALTER TABLE static_widget_configs ADD COLUMN render_style TEXT NOT NULL DEFAULT 'classic'"))
+
+
+def _migration_37(conn) -> None:
+    """Whiteboard widget render style (models.WhiteboardWidgetConfig.
+    render_style) -- same shape as migration 36."""
+    existing = {c["name"] for c in inspect(conn).get_columns("whiteboard_widget_configs")}
+    if "render_style" not in existing:
+        conn.execute(text("ALTER TABLE whiteboard_widget_configs ADD COLUMN render_style TEXT NOT NULL DEFAULT 'classic'"))
+
+
+def _migration_38(conn) -> None:
+    """Calendar widget render style (models.CalendarWidgetConfig.
+    render_style) -- same shape as migration 31/33/34/35/36/37."""
+    existing = {c["name"] for c in inspect(conn).get_columns("calendar_widget_configs")}
+    if "render_style" not in existing:
+        conn.execute(text("ALTER TABLE calendar_widget_configs ADD COLUMN render_style TEXT NOT NULL DEFAULT 'classic'"))
+
+
+def _migration_39(conn) -> None:
+    """Frame-level curated theme for "modern" style widgets (models.
+    Frame.theme, see theme_tokens.THEMES) -- same guarded-per-column
+    shape as every prior migration."""
+    existing = {c["name"] for c in inspect(conn).get_columns("frames")}
+    if "theme" not in existing:
+        conn.execute(text("ALTER TABLE frames ADD COLUMN theme TEXT NOT NULL DEFAULT 'classic'"))
+
+
+def _migration_40(conn) -> None:
+    """Per-widget text-size multiplier (models.Widget.font_scale, see
+    panel_style.FONT_SCALE_CHOICES) -- a Widget-level column like
+    border_style/border_thickness/border_color_index, not a per-type
+    config field, since any widget type with body text can use it. Every
+    existing widget defaults to 1.0 (unchanged size) until its own
+    dialog's "Text size" picker sets it. Guarded per-column, same
+    reasoning as every prior migration's own comment."""
+    existing = {c["name"] for c in inspect(conn).get_columns("widgets")}
+    if "font_scale" not in existing:
+        conn.execute(text("ALTER TABLE widgets ADD COLUMN font_scale REAL NOT NULL DEFAULT 1.0"))
+
+
+def _raw_backfill_frame_widgets(conn, frame_row, now: float) -> None:
+    """Raw-SQL equivalent of the old ORM-based _backfill_frame_widgets --
+    called from _migration_41 while the legacy Frame columns it reads
+    still physically exist, for the rare frame (if any) that somehow
+    reached this migration without ever getting a Widget during the long
+    window _ensure_widgets_backfilled ran unconditionally at every
+    startup between migration 16 and this one. Same mode dispatch,
+    including the calendar_photo_inlay two-widget split and the legacy
+    tasks-source carryover. Has to be hand-rolled in raw SQL rather than
+    reusing the old ORM helpers, since those read these columns off
+    models.Frame, which no longer declares them as of this migration."""
+    frame_id = frame_row["id"]
+    orientation = frame_row["orientation"] or "landscape"
+    cols, rows = grid.grid_dims(orientation)
+    mode = frame_row["mode"] if frame_row["mode"] in ("photos", "calendar", "whiteboard") else "photos"
+
+    def insert_widget(x, y, w, h, widget_type, sort_order):
+        # border_style/border_thickness/border_color_index/font_scale
+        # spelled out explicitly (migrations 26/40's own defaults)
+        # rather than relied on implicitly -- they're real SQL-level
+        # DEFAULTs in any database that reached this migration through
+        # the normal upgrade path, but this stays correct even if that
+        # ever stops being true.
+        result = conn.execute(text(
+            "INSERT INTO widgets (frame_id, widget_type, x, y, w, h, sort_order, created_at, "
+            "border_style, border_thickness, border_color_index, font_scale) "
+            "VALUES (:frame_id, :widget_type, :x, :y, :w, :h, :sort_order, :created_at, "
+            "'none', 3, 0, 1.0)"
+        ), {"frame_id": frame_id, "widget_type": widget_type, "x": x, "y": y, "w": w, "h": h,
+            "sort_order": sort_order, "created_at": now})
+        return result.lastrowid
+
+    def insert_photo_config(widget_id):
+        conn.execute(text(
+            "INSERT INTO photo_widget_configs (widget_id, album_id, photo_order, display_mode, "
+            "queue_target_len, current_asset_id, current_asset_set_at, queue, queue_cursor, history, "
+            "excluded_asset_ids, locked) VALUES (:widget_id, :album_id, :photo_order, :display_mode, "
+            ":queue_target_len, :current_asset_id, :current_asset_set_at, :queue, :queue_cursor, "
+            ":history, :excluded_asset_ids, 0)"
+        ), {"widget_id": widget_id, "album_id": frame_row["album_id"], "photo_order": frame_row["photo_order"],
+            "display_mode": frame_row["display_mode"], "queue_target_len": frame_row["queue_target_len"],
+            "current_asset_id": frame_row["current_asset_id"],
+            "current_asset_set_at": frame_row["current_asset_set_at"], "queue": frame_row["queue"],
+            "queue_cursor": frame_row["queue_cursor"], "history": frame_row["history"],
+            "excluded_asset_ids": frame_row["excluded_asset_ids"]})
+
+    def insert_calendar_config(widget_id):
+        conn.execute(text(
+            "INSERT INTO calendar_widget_configs (widget_id, view, week_start, browse_offset, checked_at, "
+            "cached_events, fetch_summary, weather_enabled, weather_units, weather_cities, "
+            "weather_checked_at, weather_cached, week_days, week_layout, week_start_offset, render_style) "
+            "VALUES (:widget_id, :view, :week_start, :browse_offset, :checked_at, :cached_events, "
+            ":fetch_summary, :weather_enabled, :weather_units, :weather_cities, :weather_checked_at, "
+            ":weather_cached, :week_days, :week_layout, :week_start_offset, 'classic')"
+        ), {"widget_id": widget_id, "view": frame_row["calendar_view"],
+            "week_start": frame_row["calendar_week_start"], "browse_offset": frame_row["calendar_browse_offset"],
+            "checked_at": frame_row["calendar_checked_at"], "cached_events": frame_row["calendar_cached_events"],
+            "fetch_summary": frame_row["calendar_fetch_summary"],
+            "weather_enabled": frame_row["calendar_weather_enabled"],
+            "weather_units": frame_row["calendar_weather_units"],
+            "weather_cities": frame_row["calendar_weather_cities"],
+            "weather_checked_at": frame_row["calendar_weather_checked_at"],
+            "weather_cached": frame_row["calendar_weather_cached"], "week_days": frame_row["calendar_week_days"],
+            "week_layout": frame_row["calendar_week_layout"],
+            "week_start_offset": frame_row["calendar_week_start_offset"]})
+
+    def insert_whiteboard_config(widget_id):
+        conn.execute(text(
+            "INSERT INTO whiteboard_widget_configs (widget_id, user_id, url, checked_at, cached_image, "
+            "render_style) VALUES (:widget_id, :user_id, :url, :checked_at, :cached_image, 'classic')"
+        ), {"widget_id": widget_id, "user_id": frame_row["whiteboard_user_id"], "url": frame_row["whiteboard_url"],
+            "checked_at": frame_row["whiteboard_checked_at"], "cached_image": frame_row["whiteboard_cached_image"]})
+
+    def insert_button_actions(widget_id, widget_type):
+        if widget_type == "whiteboard":
+            pairs = [("next", "check_now"), ("back", "check_now")]
+        elif widget_type in ("photos", "calendar"):
+            pairs = [("next", "advance"), ("back", "back")]
+        else:
+            pairs = []
+        for button, action in pairs:
+            conn.execute(text(
+                "INSERT INTO frame_button_actions (frame_id, button, widget_id, action, sort_order, created_at) "
+                "VALUES (:frame_id, :button, :widget_id, :action, 0, :created_at)"
+            ), {"frame_id": frame_id, "button": button, "widget_id": widget_id, "action": action,
+                "created_at": now})
+
+    def maybe_add_tasks_widget(existing_rects, next_sort_order):
+        if not frame_row["calendar_tasks_calendar_key"] or not frame_row["calendar_tasks_user_id"]:
+            return
+        min_w, min_h = grid.MIN_FOOTPRINT["tasks"]
+        rect = grid.find_open_rect(orientation, existing_rects, min_w, min_h)
+        if rect is None:
+            logger.warning(
+                "Frame %d had a legacy task list configured but no open grid space for a "
+                "standalone tasks widget during backfill -- its task source was dropped", frame_id
+            )
+            return
+        x, y, w, h = rect
+        widget_id = insert_widget(x, y, w, h, "tasks", next_sort_order)
+        conn.execute(text(
+            "INSERT INTO task_widget_configs (widget_id, checked_at, cached, name, show_completed, "
+            "render_style) VALUES (:widget_id, :checked_at, :cached, '', 0, 'classic')"
+        ), {"widget_id": widget_id, "checked_at": frame_row["calendar_tasks_checked_at"],
+            "cached": frame_row["calendar_tasks_cached"]})
+        conn.execute(text(
+            "INSERT INTO frame_task_lists (widget_id, user_id, calendar_key, included) "
+            "VALUES (:widget_id, :user_id, :calendar_key, 1)"
+        ), {"widget_id": widget_id, "user_id": frame_row["calendar_tasks_user_id"],
+            "calendar_key": frame_row["calendar_tasks_calendar_key"]})
+
+    if mode == "calendar" and frame_row["calendar_photo_inlay"]:
+        half = cols // 2
+        cal_widget_id = insert_widget(0, 0, cols - half, rows, "calendar", 0)
+        photo_widget_id = insert_widget(cols - half, 0, half, rows, "photos", 1)
+        insert_calendar_config(cal_widget_id)
+        insert_photo_config(photo_widget_id)
+        insert_button_actions(cal_widget_id, "calendar")
+        maybe_add_tasks_widget([(0, 0, cols - half, rows), (cols - half, 0, half, rows)], 2)
+        return
+
+    widget_id = insert_widget(0, 0, cols, rows, mode, 0)
+    if mode == "photos":
+        insert_photo_config(widget_id)
+    elif mode == "calendar":
+        insert_calendar_config(widget_id)
+    elif mode == "whiteboard":
+        insert_whiteboard_config(widget_id)
+    insert_button_actions(widget_id, mode)
+    if mode == "calendar":
+        maybe_add_tasks_widget([(0, 0, cols, rows)], 1)
+
+
+def _migration_41(conn) -> None:
+    """Drops the legacy per-mode Frame columns the widget system
+    (migration 16) superseded -- mode, the photo-queue fields (album_id/
+    photo_order/display_mode/queue_target_len/current_asset_id/
+    current_asset_set_at/queue/queue_cursor/history/excluded_asset_ids),
+    every calendar_* field, every whiteboard_* field, and
+    legacy_token_enabled (models.py's own removal, alongside auth.py
+    dropping the shared MANAGEMENT_TOKEN device/browser fallback it
+    gated -- see auth.py's module docstring) -- see docs/widgets.md's
+    Known Gaps, which deliberately left this open as a much larger blast
+    radius than this project's usual same-migration-drop convention.
+
+    _ensure_widgets_backfilled ran unconditionally at the end of every
+    startup from migration 16 until this one, so in practice every frame
+    already has a Widget built from these columns' values by now; the
+    backfill loop below (_raw_backfill_frame_widgets) is the same safety
+    net migration 17/18 used for their own column drops, covering the
+    edge case of a frame that somehow reached this point with none (e.g.
+    a very old, never-restarted backup).
+
+    Guarded on "mode" existing, same reasoning as migration 26/27/29/
+    30/40's own comments: frames IS dropped/recreated here (unlike
+    widgets/photo_widget_configs, which those migrations left alone),
+    but a fresh-install create_all() copy already reflects today's
+    models.py -- i.e. the post-this-migration shape, missing "mode"
+    entirely -- so a test replaying migrations 16+ from an old
+    schema_version without also reconstructing frames' pre-41 columns
+    would otherwise hit "no such column: mode" here even though it has
+    nothing to do with what that test is actually exercising."""
+    if "mode" not in {c["name"] for c in inspect(conn).get_columns("frames")}:
+        return
+    now = time.time()
+    frame_rows = conn.execute(text(
+        "SELECT id, mode, orientation, album_id, photo_order, display_mode, queue_target_len, "
+        "current_asset_id, current_asset_set_at, queue, queue_cursor, history, excluded_asset_ids, "
+        "calendar_view, calendar_week_start, calendar_photo_inlay, calendar_browse_offset, "
+        "calendar_checked_at, calendar_cached_events, calendar_fetch_summary, calendar_weather_enabled, "
+        "calendar_weather_units, calendar_weather_cities, calendar_weather_checked_at, "
+        "calendar_weather_cached, calendar_week_days, calendar_week_layout, calendar_week_start_offset, "
+        "calendar_tasks_calendar_key, calendar_tasks_user_id, calendar_tasks_checked_at, "
+        "calendar_tasks_cached, whiteboard_user_id, whiteboard_url, whiteboard_checked_at, "
+        "whiteboard_cached_image FROM frames"
+    )).mappings().all()
+
+    for row in frame_rows:
+        has_widget = conn.execute(
+            text("SELECT 1 FROM widgets WHERE frame_id = :fid LIMIT 1"), {"fid": row["id"]}
+        ).first()
+        if has_widget is None:
+            _raw_backfill_frame_widgets(conn, row, now)
+
+    conn.execute(text(
+        "CREATE TABLE frames_new ("
+        "id INTEGER PRIMARY KEY, "
+        "device_id TEXT UNIQUE, "
+        "name TEXT NOT NULL DEFAULT '', "
+        "owner_user_id INTEGER REFERENCES users(id) ON DELETE SET NULL, "
+        "controlled_by_user_id INTEGER REFERENCES users(id) ON DELETE SET NULL, "
+        "device_token TEXT NOT NULL, "
+        "device_token_ack INTEGER NOT NULL DEFAULT 0, "
+        "manage_token TEXT NOT NULL UNIQUE, "
+        "claimed_at REAL, "
+        "created_at REAL NOT NULL DEFAULT 0.0, "
+        "immich_url TEXT NOT NULL DEFAULT '', "
+        "immich_api_key TEXT NOT NULL DEFAULT '', "
+        "refresh_interval_s INTEGER NOT NULL DEFAULT 3600, "
+        "quiet_hours_enabled INTEGER NOT NULL DEFAULT 0, "
+        "quiet_hours_start TEXT NOT NULL DEFAULT '22:00', "
+        "quiet_hours_end TEXT NOT NULL DEFAULT '07:00', "
+        "timezone TEXT NOT NULL DEFAULT 'UTC', "
+        "orientation TEXT NOT NULL DEFAULT 'landscape', "
+        "palette_rgb TEXT, "
+        "color_boost REAL NOT NULL DEFAULT 1.0, "
+        "contrast_boost REAL NOT NULL DEFAULT 1.0, "
+        "dither_strength REAL NOT NULL DEFAULT 1.0, "
+        "photo_palette_rgb TEXT, "
+        "photo_dither_strength REAL NOT NULL DEFAULT 1.0, "
+        "theme TEXT NOT NULL DEFAULT 'classic', "
+        "battery_percent INTEGER NOT NULL DEFAULT -1, "
+        "battery_as_of REAL NOT NULL DEFAULT 0.0, "
+        "battery_history TEXT NOT NULL DEFAULT '[]', "
+        "last_seen REAL NOT NULL DEFAULT 0.0, "
+        "device_firmware_version TEXT NOT NULL DEFAULT '', "
+        "device_board_variant TEXT NOT NULL DEFAULT '', "
+        "battery_alert_threshold_pct INTEGER NOT NULL DEFAULT -1, "
+        "battery_alert_sent INTEGER NOT NULL DEFAULT 0, "
+        "firmware_available_version TEXT NOT NULL DEFAULT '', "
+        "firmware_update_repo_url TEXT NOT NULL DEFAULT '', "
+        "firmware_auto_update INTEGER NOT NULL DEFAULT 0, "
+        "firmware_update_token TEXT NOT NULL DEFAULT '', "
+        "firmware_update_checked_at REAL NOT NULL DEFAULT 0.0, "
+        "firmware_gitea_latest_version TEXT NOT NULL DEFAULT '', "
+        "hold_duration_ms INTEGER NOT NULL DEFAULT 3000, "
+        "next_hold_action TEXT, "
+        "back_hold_action TEXT, "
+        "last_cycled_layout_id INTEGER, "
+        "last_displayed_image BLOB, "
+        "last_displayed_at REAL NOT NULL DEFAULT 0.0, "
+        "stats_first_seen REAL NOT NULL DEFAULT 0.0, "
+        "stats_device_wakes INTEGER NOT NULL DEFAULT 0, "
+        "stats_photos_displayed INTEGER NOT NULL DEFAULT 0, "
+        "stats_photos_removed INTEGER NOT NULL DEFAULT 0, "
+        "stats_battery_reports INTEGER NOT NULL DEFAULT 0, "
+        "stats_recharge_cycles INTEGER NOT NULL DEFAULT 0, "
+        "stats_ota_updates_applied INTEGER NOT NULL DEFAULT 0, "
+        "stats_config_saves INTEGER NOT NULL DEFAULT 0)"
+    ))
+    kept_columns = (
+        "id, device_id, name, owner_user_id, controlled_by_user_id, device_token, device_token_ack, "
+        "manage_token, claimed_at, created_at, immich_url, immich_api_key, refresh_interval_s, "
+        "quiet_hours_enabled, quiet_hours_start, quiet_hours_end, timezone, orientation, palette_rgb, "
+        "color_boost, contrast_boost, dither_strength, photo_palette_rgb, photo_dither_strength, theme, "
+        "battery_percent, battery_as_of, battery_history, last_seen, device_firmware_version, "
+        "device_board_variant, battery_alert_threshold_pct, battery_alert_sent, "
+        "firmware_available_version, firmware_update_repo_url, firmware_auto_update, "
+        "firmware_update_token, firmware_update_checked_at, firmware_gitea_latest_version, "
+        "hold_duration_ms, next_hold_action, back_hold_action, last_cycled_layout_id, "
+        "last_displayed_image, last_displayed_at, stats_first_seen, stats_device_wakes, "
+        "stats_photos_displayed, stats_photos_removed, stats_battery_reports, stats_recharge_cycles, "
+        "stats_ota_updates_applied, stats_config_saves"
+    )
+    conn.execute(text(f"INSERT INTO frames_new ({kept_columns}) SELECT {kept_columns} FROM frames"))
+    conn.execute(text("DROP TABLE frames"))
+    conn.execute(text("ALTER TABLE frames_new RENAME TO frames"))
+
+
+def _migration_42(conn) -> None:
+    """Which EPD panel a frame renders for (models.Frame.panel_type, see
+    image_pipeline.PANEL_SPECS) -- same guarded-per-column shape as every
+    prior migration. Every existing frame defaults to 'epd7in3e' (the
+    original 7.3" panel), auto-corrected on next check-in if the device
+    actually reports a different board (routers/device.py's
+    BOARD_PANEL_MAP)."""
+    existing = {c["name"] for c in inspect(conn).get_columns("frames")}
+    if "panel_type" not in existing:
+        conn.execute(text("ALTER TABLE frames ADD COLUMN panel_type TEXT NOT NULL DEFAULT 'epd7in3e'"))
+
+
 MIGRATIONS = [
    (1, _migration_1),
    (2, _migration_2),
@@ -804,6 +1199,19 @@ MIGRATIONS = [
    (27, _migration_27),
    (28, _migration_28),
    (29, _migration_29),
+    (30, _migration_30),
+    (31, _migration_31),
+    (32, _migration_32),
+    (33, _migration_33),
+    (34, _migration_34),
+    (35, _migration_35),
+    (36, _migration_36),
+    (37, _migration_37),
+    (38, _migration_38),
+    (39, _migration_39),
+    (40, _migration_40),
+    (41, _migration_41),
+    (42, _migration_42),
 ]


@@ -820,18 +1228,53 @@ def run_migrations() -> None:
            # already added (e.g. "duplicate column name"). Jump
            # straight to the latest version instead.
            _migration_1(conn)
-            latest = MIGRATIONS[-1][0]
-            conn.execute(text("INSERT INTO schema_version (version) VALUES (:v)"), {"v": latest})
+            current = MIGRATIONS[-1][0]
+            conn.execute(text("INSERT INTO schema_version (version) VALUES (:v)"), {"v": current})
        else:
            current = row[0]
-            for version, fn in MIGRATIONS:
-                if version > current:
-                    logger.info("Applying schema migration %d", version)
-                    fn(conn)
-                    conn.execute(text("UPDATE schema_version SET version = :v"), {"v": version})
+
+    # Each migration commits in its own transaction (rather than the
+    # whole batch sharing one, like this used to) so that _migration_41
+    # can get a connection with no transaction pending on it yet --
+    # SQLite only honors toggling PRAGMA foreign_keys when issued as a
+    # connection's literal first statement, and it needs that off for
+    # its own DROP TABLE frames (frames is an ON DELETE CASCADE target
+    # for widgets/frame_button_actions/user_frames/etc, so leaving
+    # enforcement on there would cascade-delete every frame's widgets,
+    # not just the columns that migration means to drop). A crash
+    # partway through now simply leaves schema_version at the last
+    # migration that actually completed, same as it always could
+    # between separate runs of this function.
+    for version, fn in MIGRATIONS:
+        if version <= current:
+            continue
+        logger.info("Applying schema migration %d", version)
+        with engine.connect() as conn:
+            if fn is _migration_41:
+                # Executing this before anything else auto-begins
+                # SQLAlchemy's own Transaction bookkeeping too, so an
+                # explicit conn.begin() below would conflict with it --
+                # fn(conn) and the version UPDATE just ride that same
+                # auto-begun transaction, committed explicitly at the end.
+                conn.execute(text("PRAGMA foreign_keys=OFF"))
+            fn(conn)
+            conn.execute(text("UPDATE schema_version SET version = :v"), {"v": version})
+            conn.commit()
+            if fn is _migration_41:
+                # Restore it before this connection goes back to the
+                # pool -- otherwise a later checkout of the same
+                # underlying DBAPI connection (the connect-event
+                # listener in db.py only fires for a genuinely new one)
+                # would silently run with enforcement off. Has to
+                # happen AFTER commit(), same "no pending transaction"
+                # requirement as the OFF toggle above -- issuing it
+                # before the commit is exactly the mid-transaction
+                # no-op this migration exists to work around in the
+                # first place, just in the other direction.
+                conn.execute(text("PRAGMA foreign_keys=ON"))
+
    _ensure_frame_one()
    _ensure_server_settings()
-    _ensure_widgets_backfilled()
    _ensure_frame_calendars_rekeyed()


@@ -846,11 +1289,11 @@ def new_manage_token() -> str:
 def _ensure_frame_one() -> None:
    """First boot only (frames table empty): create frame #1 -- imported
    verbatim from a legacy config.json if one exists, otherwise fresh
-    defaults. Either way it's the legacy-token frame: the deployed
-    firmware sends no device id and (at most) the shared MANAGEMENT_TOKEN,
-    and require_device resolves those requests here. The frames-nonempty
-    guard makes this idempotent; config.json is left untouched as the
-    rollback path."""
+    defaults -- plus a single full-panel photos widget carrying over
+    whatever photo-queue state that file had (the widget system's
+    equivalent of what used to live directly on Frame; see migration
+    41). The frames-nonempty guard makes this idempotent; config.json is
+    left untouched as the rollback path."""
    with SessionLocal() as db:
        if db.scalars(select(Frame).limit(1)).first() is not None:
            return
@@ -863,26 +1306,15 @@ def _ensure_frame_one() -> None:
            device_id=None,
            device_token=new_device_token(),
            manage_token=new_manage_token(),
-            legacy_token_enabled=True,
            created_at=time.time(),
            immich_url=cfg.immich_url,
            immich_api_key=cfg.immich_api_key,
-            album_id=cfg.album_id,
-            order=cfg.order,
            refresh_interval_s=cfg.refresh_interval_s,
            quiet_hours_enabled=cfg.quiet_hours_enabled,
            quiet_hours_start=cfg.quiet_hours_start,
            quiet_hours_end=cfg.quiet_hours_end,
            timezone=cfg.timezone,
-            display_mode="crop_faces" if cfg.smart_crop_faces else "crop_fill",
            orientation=cfg.orientation,
-            queue_target_len=cfg.queue_target_len,
-            current_asset_id=cfg.current_asset_id,
-            current_asset_set_at=cfg.current_asset_set_at,
-            queue=list(cfg.queue),
-            queue_cursor=cfg.queue_cursor,
-            history=list(cfg.history),
-            excluded_asset_ids=list(cfg.excluded_asset_ids),
            battery_percent=cfg.battery_percent,
            battery_as_of=cfg.battery_as_of,
            battery_history=[list(pair) for pair in cfg.battery_history],
@@ -905,11 +1337,31 @@ def _ensure_frame_one() -> None:
            stats_config_saves=cfg.stats.config_saves,
        )
        db.add(frame)
-        db.flush()  # assign frame.id for the battery log rows
+        db.flush()  # assign frame.id for the battery log rows + widget FK

        for pair in cfg.battery_log:
            db.add(BatteryLog(frame_id=frame.id, ts=pair[0], percent=pair[1]))

+        cols, rows = grid.grid_dims(frame.orientation)
+        widget = Widget(frame_id=frame.id, widget_type="photos", x=0, y=0, w=cols, h=rows,
+                        sort_order=0, created_at=time.time())
+        db.add(widget)
+        db.flush()  # assign widget.id for the config row's FK
+        db.add(PhotoWidgetConfig(
+            widget_id=widget.id,
+            album_id=cfg.album_id,
+            order=cfg.order,
+            display_mode="crop_faces" if cfg.smart_crop_faces else "crop_fill",
+            queue_target_len=cfg.queue_target_len,
+            current_asset_id=cfg.current_asset_id,
+            current_asset_set_at=cfg.current_asset_set_at,
+            queue=list(cfg.queue),
+            queue_cursor=cfg.queue_cursor,
+            history=list(cfg.history),
+            excluded_asset_ids=list(cfg.excluded_asset_ids),
+        ))
+        db.add_all(default_button_actions(frame.id, widget.id, "photos"))
+
        db.commit()

        # The single legacy firmware slot becomes frame #1's per-frame slot.
@@ -939,168 +1391,6 @@ def _ensure_server_settings() -> None:
            db.commit()


-def _photo_config_from_frame(frame: Frame, widget_id: int) -> PhotoWidgetConfig:
-    return PhotoWidgetConfig(
-        widget_id=widget_id,
-        album_id=frame.album_id,
-        order=frame.order,
-        display_mode=frame.display_mode,
-        queue_target_len=frame.queue_target_len,
-        current_asset_id=frame.current_asset_id,
-        current_asset_set_at=frame.current_asset_set_at,
-        queue=list(frame.queue),
-        queue_cursor=frame.queue_cursor,
-        history=list(frame.history),
-        excluded_asset_ids=list(frame.excluded_asset_ids),
-    )
-
-
-def _calendar_config_from_frame(frame: Frame, widget_id: int) -> CalendarWidgetConfig:
-    return CalendarWidgetConfig(
-        widget_id=widget_id,
-        view=frame.calendar_view,
-        week_start=frame.calendar_week_start,
-        browse_offset=frame.calendar_browse_offset,
-        checked_at=frame.calendar_checked_at,
-        cached_events=list(frame.calendar_cached_events) if frame.calendar_cached_events else None,
-        fetch_summary=frame.calendar_fetch_summary,
-        weather_enabled=frame.calendar_weather_enabled,
-        weather_units=frame.calendar_weather_units,
-        weather_cities=list(frame.calendar_weather_cities) if frame.calendar_weather_cities else None,
-        weather_checked_at=frame.calendar_weather_checked_at,
-        weather_cached=list(frame.calendar_weather_cached) if frame.calendar_weather_cached else None,
-        week_days=frame.calendar_week_days,
-        week_layout=frame.calendar_week_layout,
-        week_start_offset=frame.calendar_week_start_offset,
-        # tasks_* deliberately not carried over -- see
-        # _task_config_and_list_from_frame, a sibling standalone widget
-        # now, not part of this config.
-    )
-
-
-def _task_config_and_list_from_frame(frame: Frame, widget_id: int) -> tuple[TaskWidgetConfig, FrameTaskList]:
-    """Only ever called for a frame whose legacy calendar_tasks_* columns
-    (see Frame's own docstring on those -- a dead pre-widget-system
-    field set, same status as calendar_photo_inlay below) still carry a
-    configured source -- i.e. a database jumping straight from before
-    the widget system existed to after tasks became their own
-    multi-list widget type in a single upgrade, skipping both
-    intermediate periods where it would have lived on
-    CalendarWidgetConfig (_migration_17's extraction) and then a
-    single-source TaskWidgetConfig (_migration_18's extraction) instead.
-    Reproduces the same shape those two migrations arrive at directly:
-    a bare cache-state config plus one included FrameTaskList row."""
-    cfg = TaskWidgetConfig(
-        widget_id=widget_id,
-        checked_at=frame.calendar_tasks_checked_at,
-        cached=list(frame.calendar_tasks_cached) if frame.calendar_tasks_cached else None,
-    )
-    task_list = FrameTaskList(
-        widget_id=widget_id,
-        user_id=frame.calendar_tasks_user_id,
-        calendar_key=frame.calendar_tasks_calendar_key,
-        included=True,
-    )
-    return cfg, task_list
-
-
-def _whiteboard_config_from_frame(frame: Frame, widget_id: int) -> WhiteboardWidgetConfig:
-    return WhiteboardWidgetConfig(
-        widget_id=widget_id,
-        user_id=frame.whiteboard_user_id,
-        url=frame.whiteboard_url,
-        checked_at=frame.whiteboard_checked_at,
-        cached_image=frame.whiteboard_cached_image,
-    )
-
-
-def _maybe_add_legacy_tasks_widget(db, frame: Frame, existing: list[grid.Rect], next_sort_order: int) -> None:
-    """Only relevant for a database jumping straight from before the
-    widget system existed to after tasks became their own widget type
-    in one upgrade (see _task_config_and_list_from_frame) --
-    frame.calendar_tasks_* is the dead legacy field set otherwise.
-    Requires both calendar_key and user_id (FrameTaskList.user_id is
-    NOT NULL) -- same guard _migration_18's own SQL extraction uses.
-    Auto-placed in whatever open space is left after the widget(s) above
-    it in _backfill_frame_widgets claimed theirs, same find_open_rect
-    logic a manual "add widget" uses; silently dropped (logged) if none
-    fits, same as this migration having nowhere else to put it either."""
-    if not frame.calendar_tasks_calendar_key or not frame.calendar_tasks_user_id:
-        return
-    min_w, min_h = grid.MIN_FOOTPRINT["tasks"]
-    rect = grid.find_open_rect(frame.orientation, existing, min_w, min_h)
-    if rect is None:
-        logger.warning(
-            "Frame %d had a legacy task list configured but no open grid space for a "
-            "standalone tasks widget during backfill -- its task source was dropped", frame.id
-        )
-        return
-    x, y, w, h = rect
-    task_widget = Widget(frame_id=frame.id, widget_type="tasks", x=x, y=y, w=w, h=h,
-                         sort_order=next_sort_order, created_at=time.time())
-    db.add(task_widget)
-    db.flush()
-    cfg, task_list = _task_config_and_list_from_frame(frame, task_widget.id)
-    db.add(cfg)
-    db.add(task_list)
-
-
-def _backfill_frame_widgets(db, frame: Frame) -> None:
-    cols, rows = grid.grid_dims(frame.orientation)
-    mode = frame.mode if frame.mode in ("photos", "calendar", "whiteboard") else "photos"
-
-    if mode == "calendar" and frame.calendar_photo_inlay:
-        # Reproduces the old fixed 50/50 inlay split as two independent
-        # widgets instead of silently dropping half of what the frame was
-        # showing -- see models.py's CalendarWidgetConfig docstring on why
-        # "photo inlay" isn't a widget-system concept anymore otherwise.
-        half = cols // 2
-        cal_widget = Widget(frame_id=frame.id, widget_type="calendar",
-                            x=0, y=0, w=cols - half, h=rows, sort_order=0, created_at=time.time())
-        photo_widget = Widget(frame_id=frame.id, widget_type="photos",
-                              x=cols - half, y=0, w=half, h=rows, sort_order=1, created_at=time.time())
-        db.add_all([cal_widget, photo_widget])
-        db.flush()  # assign ids before the FK'd config rows reference them
-        db.add(_calendar_config_from_frame(frame, cal_widget.id))
-        db.add(_photo_config_from_frame(frame, photo_widget.id))
-        db.add_all(default_button_actions(frame.id, cal_widget.id, "calendar"))
-        _maybe_add_legacy_tasks_widget(
-            db, frame, [(0, 0, cols - half, rows), (cols - half, 0, half, rows)], next_sort_order=2
-        )
-        return
-
-    widget = Widget(frame_id=frame.id, widget_type=mode, x=0, y=0, w=cols, h=rows,
-                    sort_order=0, created_at=time.time())
-    db.add(widget)
-    db.flush()
-    if mode == "photos":
-        db.add(_photo_config_from_frame(frame, widget.id))
-    elif mode == "calendar":
-        db.add(_calendar_config_from_frame(frame, widget.id))
-    elif mode == "whiteboard":
-        db.add(_whiteboard_config_from_frame(frame, widget.id))
-    db.add_all(default_button_actions(frame.id, widget.id, mode))
-    if mode == "calendar":
-        _maybe_add_legacy_tasks_widget(db, frame, [(0, 0, cols, rows)], next_sort_order=1)
-
-
-def _ensure_widgets_backfilled() -> None:
-    """Every frame needs at least one Widget once the widget system is
-    live -- runs unconditionally after every startup (both a from-scratch
-    _ensure_frame_one() install and an existing-install upgrade past
-    _migration_16 land here) and is a no-op for any frame that already
-    has one. Builds a widget that reproduces the frame's current mode/
-    settings/state exactly, so upgrading never changes what a frame
-    displays or what its physical buttons do on its own."""
-    with SessionLocal() as db:
-        for frame in db.scalars(select(Frame)).all():
-            has_widget = db.scalars(select(Widget).where(Widget.frame_id == frame.id).limit(1)).first()
-            if has_widget is not None:
-                continue
-            _backfill_frame_widgets(db, frame)
-        db.commit()
-
-
 def _ensure_frame_calendars_rekeyed() -> None:
    """Re-keys frame_calendars from frame_id to widget_id -- a frame can
    hold more than one independent calendar widget (see the widget
@@ -1113,27 +1403,25 @@ def _ensure_frame_calendars_rekeyed() -> None:
    and savable even while a frame's old `mode` was "photos"), not real
    live configuration.

-    Deliberately NOT a numbered migration: this needs each frame's
-    calendar widget to already exist to know what to re-key against, and
-    those widget rows aren't created by a schema migration at all --
-    they come from _ensure_widgets_backfilled() above, which (like this
-    function) runs unconditionally after every startup rather than being
-    tracked by schema_version. Running this as a numbered migration
-    would execute it *before* that backfill during a real upgrade (the
-    numbered-migration loop runs first, see run_migrations), silently
-    dropping every row -- caught by test_migrations.py actually exercising
-    the raw-SQL upgrade path instead of the fresh-install create_all()
-    shortcut every other test in that file takes.
+    Deliberately NOT a numbered migration: every frame's calendar widget
+    must already exist to know what to re-key against, and for a genuine
+    pre-widget-system database those rows only exist once _migration_41's
+    own backfill has run (a step inside that migration, not before it).
+    A numbered migration for this would race ahead of that backfill (the
+    numbered-migration loop runs top to bottom in one pass, see
+    run_migrations), silently dropping every row -- caught by
+    test_migrations.py actually exercising the raw-SQL upgrade path
+    instead of the fresh-install create_all() shortcut every other test
+    in that file takes.

-    Runs unconditionally after every startup, like _ensure_widgets_
-    backfilled; a no-op the moment frame_calendars is already
-    widget_id-shaped (every fresh install, and any existing install
-    after its first run past this code) -- SQLite can't ALTER a column's
-    FK target or drop a column that's part of an index/FK constraint, so
-    when it isn't a no-op this is the standard SQLite "rebuild" pattern:
-    create the new-shape table, copy matching rows across (joining to
-    find each row's calendar widget), drop the old table, rename the new
-    one into place."""
+    Runs unconditionally after every startup instead; a no-op the moment
+    frame_calendars is already widget_id-shaped (every fresh install,
+    and any existing install after its first run past this code) --
+    SQLite can't ALTER a column's FK target or drop a column that's part
+    of an index/FK constraint, so when it isn't a no-op this is the
+    standard SQLite "rebuild" pattern: create the new-shape table, copy
+    matching rows across (joining to find each row's calendar widget),
+    drop the old table, rename the new one into place."""
    inspector = inspect(engine)
    columns = {c["name"] for c in inspector.get_columns("frame_calendars")}
    if "widget_id" in columns:
@@ -117,14 +117,10 @@ class Frame(Base):
    __tablename__ = "frames"

    id: Mapped[int] = mapped_column(primary_key=True)
-    # 12 lowercase hex chars of the device's full STA MAC. NULL only for
-    # the migrated legacy frame until its device first reports an id.
+    # 12 lowercase hex chars of the device's full STA MAC. NULL until its
+    # device first reports an id.
    device_id: Mapped[str | None] = mapped_column(String, unique=True, nullable=True)
    name: Mapped[str] = mapped_column(String, default="")
-    # Renderer dispatch seam -- "photos", "calendar", or "whiteboard"
-    # (see routers/device.py RENDERERS/ADVANCE_RENDERERS/BACK_RENDERERS
-    # and routers/common.py FRAME_MODES).
-    mode: Mapped[str] = mapped_column(String, default="photos")
    # Whose Immich library this frame pulls from; NULL = unclaimed.
    owner_user_id: Mapped[int | None] = mapped_column(
        ForeignKey("users.id", ondelete="SET NULL"), nullable=True
@@ -138,11 +134,6 @@ class Frame(Base):
    # pushing it in /frame/config responses.
    device_token_ack: Mapped[bool] = mapped_column(Boolean, default=False)
    manage_token: Mapped[str] = mapped_column(String, unique=True)
-    # Migration window: this frame also accepts the legacy shared
-    # MANAGEMENT_TOKEN (and no-id requests resolve to it). Only ever the
-    # migrated frame #1; cleared from /admin once the device is on
-    # per-frame auth.
-    legacy_token_enabled: Mapped[bool] = mapped_column(Boolean, default=False)
    claimed_at: Mapped[float | None] = mapped_column(Float, nullable=True)
    created_at: Mapped[float] = mapped_column(Float, default=time.time)

@@ -153,19 +144,20 @@ class Frame(Base):
    immich_url: Mapped[str] = mapped_column(String, default="")
    immich_api_key: Mapped[str] = mapped_column(String, default="")

-    # -- settings (attribute names match the old FrameConfig fields) --
-    album_id: Mapped[str] = mapped_column(String, default="")
-    order: Mapped[str] = mapped_column("photo_order", String, default="sequential")
+    # -- settings --
    refresh_interval_s: Mapped[int] = mapped_column(Integer, default=3600)
    quiet_hours_enabled: Mapped[bool] = mapped_column(Boolean, default=False)
    quiet_hours_start: Mapped[str] = mapped_column(String, default="22:00")
    quiet_hours_end: Mapped[str] = mapped_column(String, default="07:00")
    timezone: Mapped[str] = mapped_column(String, default="UTC")
-    # How a photo's aspect ratio is reconciled with the panel's -- see
-    # image_pipeline.DISPLAY_MODES.
-    display_mode: Mapped[str] = mapped_column(String, default="crop_faces")
    orientation: Mapped[str] = mapped_column(String, default="landscape")
-    queue_target_len: Mapped[int] = mapped_column(Integer, default=20)
+    # Which EPD panel this frame renders for (image_pipeline.PANEL_SPECS
+    # key) -- a property of the device's hardware, auto-derived from its
+    # self-reported board (see routers/device.py's BOARD_PANEL_MAP), never
+    # a user-editable setting: a mismatched value would corrupt every
+    # image sent to the device. Defaults to the original 7.3" panel this
+    # project shipped with.
+    panel_type: Mapped[str] = mapped_column(String, default="epd7in3e")
    # Advanced configuration: [[r,g,b], ...] x6 (black/white/yellow/red/
    # blue/green, matching image_pipeline.PANEL_CODES order) overriding
    # DEFAULT_PALETTE_RGB for this frame's actual panel. NULL = use the
@@ -178,113 +170,19 @@ class Frame(Base):
    # 0.0-1.0, see image_pipeline._quantize -- 1.0 matches this project's
    # original always-on full-strength Floyd-Steinberg dithering.
    dither_strength: Mapped[float] = mapped_column(Float, default=1.0)
-
-    # -- calendar mode (see calendar_feed.py, calendar_render.py,
-    # routers/device.py's RENDERERS["calendar"]) --
-    calendar_view: Mapped[str] = mapped_column(String, default="agenda")  # "agenda" | "week" | "month"
-    # 0=Monday..6=Sunday (matches date.weekday()/calendar.Calendar) --
-    # which day week/month views start their grid on.
-    calendar_week_start: Mapped[int] = mapped_column(Integer, default=0)
-    # Agenda view only; reuses this frame's existing photos-mode album/
-    # queue, not a separate photo setup.
-    calendar_photo_inlay: Mapped[bool] = mapped_column(Boolean, default=False)
-    # How many periods (unit depends on calendar_view: days/weeks/months)
-    # NEXT/BACK have browsed from "today". Reset to 0 by the next normal
-    # (non-button) /frame/image request, and whenever calendar_view
-    # itself changes -- a stale offset means something different in a
-    # different view's units.
-    calendar_browse_offset: Mapped[int] = mapped_column(Integer, default=0)
-    # Throttled merge-fetch cache (see routers/common.py's
-    # get_or_refresh_calendar_events) -- same shape as the
-    # firmware_update_checked_at/firmware_gitea_latest_version pattern
-    # below. One shared cache for every included user's merged events,
-    # not per-user.
-    calendar_checked_at: Mapped[float] = mapped_column(Float, default=0.0)
-    calendar_cached_events: Mapped[list | None] = mapped_column(JSON, nullable=True, default=None)
-    # "" when the last merge-fetch fully succeeded, else e.g. "1 of 2
-    # calendars unavailable" -- never names which user's feed failed, a
-    # shared household display shouldn't call out a specific person's
-    # outage to everyone who looks at it.
-    calendar_fetch_summary: Mapped[str] = mapped_column(String, default="")
-
-    # Optional weather strip, agenda/today & tomorrow/week views only --
-    # never month, there's no room (see calendar_render.py's _BUILDERS).
-    # Off by default.
-    calendar_weather_enabled: Mapped[bool] = mapped_column(Boolean, default=False)
-    calendar_weather_units: Mapped[str] = mapped_column(String, default="fahrenheit")  # "fahrenheit" | "celsius"
-    # [{"label", "latitude", "longitude"}, ...] -- each geocoded once via
-    # weather.geocode_city() when added from the Calendar tab.
-    calendar_weather_cities: Mapped[list | None] = mapped_column(JSON, nullable=True, default=None)
-    # Throttled per-city forecast cache (see routers/common.py's
-    # get_or_refresh_weather) -- same shape idiom as
-    # calendar_checked_at/calendar_cached_events above.
-    # [{"label", "days": {"YYYY-MM-DD": {"code","high","low"}}}, ...]
-    calendar_weather_checked_at: Mapped[float] = mapped_column(Float, default=0.0)
-    calendar_weather_cached: Mapped[list | None] = mapped_column(JSON, nullable=True, default=None)
-
-    # Week view: how many days to show (2-10, default 7 -- the original
-    # fixed behavior) and whether they're laid out as side-by-side
-    # columns or stacked bands (see calendar_render.py's _build_week).
-    calendar_week_days: Mapped[int] = mapped_column(Integer, default=7)
-    calendar_week_layout: Mapped[str] = mapped_column(String, default="horizontal")  # "horizontal" | "vertical"
-    # Only used when calendar_week_days != 7 -- calendar_week_start's
-    # fixed-weekday anchor ("start on the most recent Monday") stops
-    # making sense once the view isn't a literal calendar week, so a
-    # non-7-day view instead starts this many days from today (0 =
-    # starts today, negative = starts in the past, positive = starts in
-    # the future). Ignored (calendar_week_start governs instead) at the
-    # default 7 days, so this has no effect until someone actually
-    # changes the day count.
-    calendar_week_start_offset: Mapped[int] = mapped_column(Integer, default=0)
-
-    # Optional task list, week view only -- takes the space of one day
-    # slot rather than adding an extra one (see calendar_render.py's
-    # _draw_tasks). CalDAV only (a task list is a VTODO collection, not
-    # something a plain ICS subscription meaningfully has); source is
-    # one specific linked user's own CalDAV calendar, same
-    # owner-controls-their-own-data permission split as FrameCalendar.
-    # calendar_tasks_user_id
-    # SET NULL on the user's deletion clears the source rather than
-    # leaving a dangling reference (checked_at isn't reset by that, but
-    # the next refresh attempt finds no source and just returns []).
-    calendar_tasks_enabled: Mapped[bool] = mapped_column(Boolean, default=False)
-    calendar_tasks_user_id: Mapped[int | None] = mapped_column(
-        ForeignKey("users.id", ondelete="SET NULL"), nullable=True
-    )
-    calendar_tasks_calendar_key: Mapped[str | None] = mapped_column(String, nullable=True)
-    calendar_tasks_checked_at: Mapped[float] = mapped_column(Float, default=0.0)
-    # [{"summary", "due" (ISO date/datetime string or None)}, ...],
-    # already filtered to outstanding (not-completed) tasks and sorted
-    # by due date -- see caldav_client.fetch_tasks.
-    calendar_tasks_cached: Mapped[list | None] = mapped_column(JSON, nullable=True, default=None)
-
-    # -- whiteboard mode (see webdav_client.py, whiteboard.py,
-    # routers/device.py's RENDERERS["whiteboard"]) -- a frame-wide
-    # setting like calendar mode's own frame_calendars source, not
-    # personal data, but still owner-gated the same way: only
-    # whiteboard_user_id may point the frame at their own account, since
-    # it's their credentials being used to fetch it. --
-    whiteboard_user_id: Mapped[int | None] = mapped_column(
-        ForeignKey("users.id", ondelete="SET NULL"), nullable=True
-    )
-    # The specific .whiteboard file's WebDAV URL -- pasted directly, same
-    # idiom as calendar_ics_url, not discovered/browsed (unlike CalDAV's
-    # account-has-several-calendars case, a WebDAV account doesn't need
-    # a picker step here since the user already knows which one file).
-    whiteboard_url: Mapped[str] = mapped_column(String, default="")
-    whiteboard_checked_at: Mapped[float] = mapped_column(Float, default=0.0)
-    # Cached rendered PNG bytes (see whiteboard.fetch_and_render) --
-    # BLOB rather than the JSON columns the rest of this cache-pattern
-    # family uses, since this is binary image data, not JSON-shaped.
-    whiteboard_cached_image: Mapped[bytes | None] = mapped_column(LargeBinary, nullable=True)
-
-    # -- state --
-    current_asset_id: Mapped[str] = mapped_column(String, default="")
-    current_asset_set_at: Mapped[float] = mapped_column(Float, default=0.0)
-    queue: Mapped[list] = mapped_column(MutableList.as_mutable(JSON), default=list)
-    queue_cursor: Mapped[int] = mapped_column(Integer, default=0)
-    history: Mapped[list] = mapped_column(MutableList.as_mutable(JSON), default=list)
-    excluded_asset_ids: Mapped[list] = mapped_column(MutableList.as_mutable(JSON), default=list)
+    # Same shape as palette_rgb/dither_strength above, but scoped to only
+    # the photos widget (widgets/photos.py quantizes against these itself,
+    # before returning -- see its own docstring) -- lets a frame tune the
+    # rest of its widgets' palette/dithering (e.g. a "modern" HTML-
+    # rendered dashboard look) independently of what actually looks best
+    # for real photographs. NULL/1.0 = same defaults as the main fields.
+    photo_palette_rgb: Mapped[list | None] = mapped_column(JSON, nullable=True, default=None)
+    photo_dither_strength: Mapped[float] = mapped_column(Float, default=1.0)
+    # Curated visual theme for "modern" (HTML/CSS) style widgets -- see
+    # theme_tokens.THEMES. Frame-level (like palette_rgb/dither_strength
+    # above), not per-widget, since a theme is "how this frame looks."
+    # Widgets rendered in classic (PIL) style ignore this entirely.
+    theme: Mapped[str] = mapped_column(String, default="classic")

    # -- telemetry --
    battery_percent: Mapped[int] = mapped_column(Integer, default=-1)
@@ -328,6 +226,16 @@ class Frame(Base):
    # starts over from the first one, same as an unset value.
    last_cycled_layout_id: Mapped[int | None] = mapped_column(Integer, nullable=True)

+    # -- "now displaying" (see routers/device.py's _record_last_displayed,
+    # api_frames.py's /now-displaying endpoint) -- exactly what the last
+    # device-facing render (/frame/image, /frame/advance, /frame/back, or
+    # a global hold action) actually sent, as an upright PNG, so the web
+    # UI's header preview can show it frozen alongside a live "up next"
+    # re-render instead of conflating the two. NULL until a real device
+    # has fetched at least once.
+    last_displayed_image: Mapped[bytes | None] = mapped_column(LargeBinary, nullable=True, default=None)
+    last_displayed_at: Mapped[float] = mapped_column(Float, default=0.0)
+
    # -- stats (flattened from the old nested FrameStats) --
    stats_first_seen: Mapped[float] = mapped_column(Float, default=0.0)
    stats_device_wakes: Mapped[int] = mapped_column(Integer, default=0)
@@ -476,6 +384,12 @@ class Widget(Base):
    border_style: Mapped[str] = mapped_column(String, default="none")
    border_thickness: Mapped[int] = mapped_column(Integer, default=3)
    border_color_index: Mapped[int] = mapped_column(Integer, default=0)
+    # Text-size multiplier for this widget's own body/title text -- another
+    # Widget-level property regardless of widget_type, same reasoning as
+    # border_style above (any widget type with text can use it). One of
+    # panel_style.FONT_SCALE_CHOICES; 1.0 (unchanged size) for every
+    # existing widget until its dialog's "Text size" picker sets it.
+    font_scale: Mapped[float] = mapped_column(Float, default=1.0)

    __table_args__ = (Index("ix_widgets_frame", "frame_id"),)

@@ -532,6 +446,10 @@ class CalendarWidgetConfig(Base):
    week_days: Mapped[int] = mapped_column(Integer, default=7)
    week_layout: Mapped[str] = mapped_column(String, default="horizontal")
    week_start_offset: Mapped[int] = mapped_column(Integer, default=0)
+    # classic (calendar_render.py) vs modern (app/calendar_html_render.py,
+    # agenda mode only so far -- see that module's docstring) -- see
+    # widgets/calendar.py's render().
+    render_style: Mapped[str] = mapped_column(String, default="classic")


 class TaskWidgetConfig(Base):
@@ -570,6 +488,9 @@ class TaskWidgetConfig(Base):
    # outstanding ones -- off by default, same "opt into more" posture
    # as calendar_weather_enabled.
    show_completed: Mapped[bool] = mapped_column(Boolean, default=False)
+    # classic (hand-drawn PIL, calendar_render._build_tasks) vs modern
+    # (app/html_render.py) -- see widgets/tasks.py's render().
+    render_style: Mapped[str] = mapped_column(String, default="classic")


 class WhiteboardWidgetConfig(Base):
@@ -583,6 +504,10 @@ class WhiteboardWidgetConfig(Base):
    url: Mapped[str] = mapped_column(String, default="")
    checked_at: Mapped[float] = mapped_column(Float, default=0.0)
    cached_image: Mapped[bytes | None] = mapped_column(LargeBinary, nullable=True)
+    # classic (no chrome, unchanged) vs modern (app/html_render.py's
+    # rounded-corner shadowed card) -- see widgets/whiteboard.py's
+    # render().
+    render_style: Mapped[str] = mapped_column(String, default="classic")


 class WeatherWidgetConfig(Base):
@@ -597,13 +522,19 @@ class WeatherWidgetConfig(Base):
    `cached`'s shape depends on `mode`: {"temp","category"} for current,
    a list of {"time","temp","category"} for hourly, a
    {"YYYY-MM-DD": {...}} dict for daily, or a list of
-    {"label","high","low","category"} for multi_city."""
+    {"label","high","low","category"} for multi_city.
+    `render_style` picks which renderer draws the widget: "classic" (the
+    hand-drawn PIL primitives in app/weather_render.py, unchanged
+    default) or "modern" (app/html_render.py's Jinja2/headless-Chromium
+    path, "current"/"daily" modes only for now -- see weather.py's
+    render())."""

    __tablename__ = "weather_widget_configs"

    widget_id: Mapped[int] = mapped_column(ForeignKey("widgets.id", ondelete="CASCADE"), primary_key=True)
    mode: Mapped[str] = mapped_column(String, default="current")  # current | hourly | daily | multi_city
    provider: Mapped[str] = mapped_column(String, default="open_meteo")  # open_meteo | nws
+    render_style: Mapped[str] = mapped_column(String, default="classic")  # classic | modern
    units: Mapped[str] = mapped_column(String, default="fahrenheit")  # fahrenheit | celsius
    # Single-location modes only (current/hourly/daily) -- geocoded once
    # via weather.geocode_city() when set, same idiom as
@@ -652,6 +583,9 @@ class TextWidgetConfig(Base):
    font_family: Mapped[str] = mapped_column(String, default="sans")
    align: Mapped[str] = mapped_column(String, default="left")  # "left" | "center" | "right"
    background_color: Mapped[str] = mapped_column(String, default="#ffffff")
+    # classic (hand-drawn PIL) vs modern (app/html_render.py) -- see
+    # widgets/text.py's render()/render_preview_png().
+    render_style: Mapped[str] = mapped_column(String, default="classic")


 class StaticWidgetConfig(Base):
@@ -673,6 +607,10 @@ class StaticWidgetConfig(Base):
    # minus crop_faces -- no face detection for an uploaded image (see
    # image_pipeline.STATIC_DISPLAY_MODES).
    display_mode: Mapped[str] = mapped_column(String, default="crop_fill")
+    # classic (no chrome, unchanged) vs modern (app/html_render.py's
+    # rounded-corner shadowed card) -- see widgets/static_image.py's
+    # render().
+    render_style: Mapped[str] = mapped_column(String, default="classic")


 class BatteryWidgetConfig(Base):
@@ -683,12 +621,14 @@ class BatteryWidgetConfig(Base):
    of anything the widget itself fetches or the user authors. `mode`
    "compact" is icon + percent only; "detailed" (default) adds the
    routers.common.battery_estimate_s time-remaining estimate and the
-    last report's age."""
+    last report's age. `render_style` picks classic (hand-drawn PIL) vs
+    modern (app/html_render.py) -- see widgets/battery.py's render()."""

    __tablename__ = "battery_widget_configs"

    widget_id: Mapped[int] = mapped_column(ForeignKey("widgets.id", ondelete="CASCADE"), primary_key=True)
    mode: Mapped[str] = mapped_column(String, default="detailed")  # compact | detailed
+    render_style: Mapped[str] = mapped_column(String, default="classic")  # classic | modern


 # widget_type -> its per-type extension table, keyed by widget_id. Used
@@ -0,0 +1,206 @@
+"""Shared visual language for everything drawn onto the e-ink panel
+(excluding widgets/text.py, which already has its own richer multi-
+family font picker and is left alone) -- spacing, ink-color resolution,
+Inter font loading, and the small set of drawing primitives
+(header bar, color chip, battery icon) more than one render module needs.
+
+Centralizes what used to be independently redefined per render file
+(calendar_render.py/weather_render.py each had their own MARGIN/BG/FG/
+RULE, widgets/battery.py and manage_overlay.py each had their own
+battery-glyph-drawing code) so the panel reads as one consistent system
+instead of N separately-styled widgets. Still bound by the same hard
+constraints as everything else that draws before the single whole-canvas
+quantize/dither pass (see image_pipeline.py's module docstring/draw_text):
+every fill here is one of DEFAULT_PALETTE_RGB's 6 exact colors, and text
+always routes through image_pipeline.draw_text.
+"""
+
+from __future__ import annotations
+
+from functools import lru_cache
+from pathlib import Path
+
+from PIL import Image, ImageDraw, ImageFont
+
+from .image_pipeline import DEFAULT_PALETTE_RGB
+
+# Spacing scale. CONTENT_MARGIN carries over calendar_render.py/
+# weather_render.py's own long-tuned MARGIN=20 value unchanged (not
+# re-tuned -- every wrap/truncation-width calc in those modules was
+# measured against it). GUTTER is new: the inset every widget applies
+# within its own target_w x target_h box (see card_canvas) to get a
+# visible seam between adjacent widgets without touching grid.py's
+# zero-gap cell math.
+GUTTER = 6
+CONTENT_MARGIN = 20
+CARD_RADIUS = 12
+CHIP_RADIUS = 4
+
+# models.Widget.font_scale's allowed values -- a per-widget text-size
+# multiplier (the Layout dialog's "Text size" picker), same "reject
+# invalid, don't silently coerce" posture as border_style. Deliberately a
+# small fixed set (a <select>, not a raw slider) rather than an arbitrary
+# float: every _AGENDA_FONTS/_TASKS_FONTS-style tuple in calendar_render.py
+# and every proportional size in html_render.py/calendar_html_render.py
+# derives row heights/max_rows from the same scaled font size, so an
+# unbounded scale risks a layout that no longer fits its own box.
+FONT_SCALE_CHOICES = (1.0, 1.25, 1.5)
+
+
+def scaled_size(value: float, font_scale: float) -> int:
+    """Applies a widget's font_scale to a text-size value and rounds to
+    an int px, floored at 1 so an extreme scale can never zero out a
+    font. Shared by both the classic (PIL, calendar_render.py) and modern
+    (HTML/CSS, html_render.py/calendar_html_render.py) renderers so "make
+    this widget's text bigger" behaves identically regardless of
+    render_style -- every caller applies this immediately after its own
+    tier lookup/floor calc, so row heights/max_rows computed from the
+    result already account for the bigger text."""
+    return max(1, round(value * font_scale))
+
+# Index constants into DEFAULT_PALETTE_RGB/a frame's own Frame.
+# palette_rgb override -- same order as image_pipeline.PALETTE_LABELS.
+BLACK, WHITE, YELLOW, RED, BLUE, GREEN = range(6)
+
+# Which accent ink each widget kind's chrome (header bar, task checkbox,
+# etc.) uses -- one dict, so "what color is a calendar header" has a
+# single answer instead of being hardcoded separately everywhere a
+# render module wants it. This is what makes a future global color
+# theme *possible* without another pass through every render module: a
+# per-frame override just needs to pick a different THEME mapping (or
+# remap individual entries) here and resolve through theme_color/ink
+# below, which already goes through a frame's own tuned Frame.
+# palette_rgb -- swapping a slot's actual RGB (e.g. a custom "blue")
+# already re-themes every widget that uses THEME_CALENDAR for its
+# header, with no other code to touch. Weather deliberately maps to
+# BLACK, not a color -- see weather_render's header call site -- so its
+# own hand-drawn, already-colorful icons stay the star.
+THEME_CALENDAR = BLUE
+THEME_TASKS = GREEN
+THEME_WEATHER = BLACK
+THEME = {"calendar": THEME_CALENDAR, "tasks": THEME_TASKS, "weather": THEME_WEATHER}
+
+
+def theme_color(widget_kind: str, palette_rgb: list | None = None) -> tuple[int, int, int]:
+    """THEME[widget_kind] resolved against this frame's actual palette --
+    the one call every render module's header/accent chrome should go
+    through instead of hardcoding a palette index inline."""
+    return ink(palette_rgb, THEME[widget_kind])
+
+
+def ink(palette_rgb: list | None, index: int) -> tuple[int, int, int]:
+    """One of this frame's actual panel colors by DEFAULT_PALETTE_RGB
+    index -- generalizes the same resolution idiom weather_render._ink/
+    calendar_render._event_colors already used locally, so a custom
+    palette override (Frame.palette_rgb) still gets its own actual
+    yellow/red/blue/green, and every fill stays an exact, ditherless
+    palette match either way."""
+    return tuple((palette_rgb or DEFAULT_PALETTE_RGB)[index])
+
+
+_FONT_DIR = Path(__file__).resolve().parent / "fonts"
+
+
+@lru_cache(maxsize=256)
+def font_bold(size: int) -> ImageFont.FreeTypeFont:
+    return ImageFont.truetype(str(_FONT_DIR / "Inter-Bold.ttf"), size)
+
+
+@lru_cache(maxsize=256)
+def font_regular(size: int) -> ImageFont.FreeTypeFont:
+    return ImageFont.truetype(str(_FONT_DIR / "Inter-Regular.ttf"), size)
+
+
+def card_canvas(target_w: int, target_h: int,
+               bg: tuple[int, int, int] = (255, 255, 255)) -> tuple:
+    """A full target_w x target_h canvas filled with `bg`, plus the
+    GUTTER-inset rect (x0, y0, w, h) every widget should draw its actual
+    chrome/content within -- this is the whole mechanism behind the
+    gutter between widgets (see module docstring): the widget's render()
+    contract (exact target_w x target_h in, same size out, unchanged) is
+    what routers/device.py pastes and what draw_widget_border frames, so
+    a border still frames the widget's true full box; only the widget's
+    own drawing backs off from that box's true edge."""
+    img = Image.new("RGB", (target_w, target_h), bg)
+    draw = ImageDraw.Draw(img)
+    x0, y0 = GUTTER, GUTTER
+    w, h = max(1, target_w - 2 * GUTTER), max(1, target_h - 2 * GUTTER)
+    return img, draw, (x0, y0, w, h)
+
+
+def _clamped_radius(radius: int, w: int, h: int) -> int:
+    return max(0, min(radius, w // 2, h // 2))
+
+
+def draw_header_bar(draw: ImageDraw.ImageDraw, rect: tuple[int, int, int, int], height: int,
+                    fill: tuple[int, int, int], radius: int = CARD_RADIUS) -> None:
+    """A widget's title bar: rounded top corners only (corners=(tl, tr,
+    bl, br), the bottom pair left square) so it reads as a card's header
+    fused to the content below it, not a standalone pill floating with a
+    gap above its own body."""
+    x0, y0, w, h = rect
+    r = _clamped_radius(radius, w, height * 2)
+    draw.rounded_rectangle([x0, y0, x0 + w, y0 + height], radius=r, fill=fill,
+                           corners=(True, True, False, False))
+
+
+def draw_color_chip(draw: ImageDraw.ImageDraw, x0: int, y0: int, x1: int, y1: int,
+                    colors: list[tuple[int, int, int]], radius: int = CHIP_RADIUS) -> None:
+    """One rounded chip for a single-source event/task, or that same
+    footprint split into equal-width side-by-side segments -- one per
+    contributing calendar -- for a deduplicated shared event (see
+    calendar_render._event_colors/calendar_feed.merge_events). Splitting
+    rather than e.g. concentric rings keeps every color equally "thick
+    and bold" at a glance, the same design goal a single pinned color
+    already has. Generalizes calendar_render.py's old private
+    _draw_color_bar so the radius comes from one shared constant."""
+    if len(colors) == 1:
+        r = _clamped_radius(radius, x1 - x0, y1 - y0)
+        draw.rounded_rectangle([x0, y0, x1, y1], radius=r, fill=colors[0])
+        return
+    seg_w = (x1 - x0) / len(colors)
+    for i, color in enumerate(colors):
+        seg_x0 = round(x0 + i * seg_w)
+        seg_x1 = round(x0 + (i + 1) * seg_w) - (2 if i < len(colors) - 1 else 0)
+        draw.rectangle([seg_x0, y0, seg_x1, y1], fill=color)
+
+
+def battery_fill_color(percent: int, palette_rgb: list | None = None) -> tuple[int, int, int]:
+    """Red/yellow/green by charge level -- the fill itself carries the
+    "how worried should I be" signal, not just the number next to it.
+    Shared threshold logic for widgets/battery.py and manage_overlay.py,
+    which previously each defined the same three-tier thresholds twice."""
+    if percent <= 15:
+        return ink(palette_rgb, RED)
+    if percent <= 40:
+        return ink(palette_rgb, YELLOW)
+    return ink(palette_rgb, GREEN)
+
+
+def draw_battery_icon(draw: ImageDraw.ImageDraw, x0: int, y0: int, icon_w: int, icon_h: int,
+                      percent: int, palette_rgb: list | None = None) -> None:
+    """A rounded battery glyph -- outline + charge-level fill + terminal
+    nub -- anchored at (x0, y0), the body's own top-left corner (the nub
+    extends past icon_w on the right). The one shared implementation
+    behind what used to be two separate ImageDraw glyphs: widgets/
+    battery.py's own icon+percent widget, and manage_overlay.py's compact
+    battery readout on the "scan to manage" overlay -- same shape, same
+    red/yellow/green thresholds, previously kept in sync by convention
+    rather than by sharing code."""
+    stroke = max(2, icon_h // 12)
+    nub_w = max(3, icon_w // 10)
+    nub_h = icon_h // 2
+    radius = _clamped_radius(icon_h // 6, icon_w, icon_h)
+
+    inner_x0, inner_y0 = x0 + stroke, y0 + stroke
+    inner_x1, inner_y1 = x0 + icon_w - stroke, y0 + icon_h - stroke
+    fill_x1 = inner_x0 + round((inner_x1 - inner_x0) * (max(0, min(100, percent)) / 100))
+    if fill_x1 > inner_x0:
+        fill_radius = _clamped_radius(radius, fill_x1 - inner_x0, inner_y1 - inner_y0)
+        draw.rounded_rectangle([inner_x0, inner_y0, fill_x1, inner_y1], radius=fill_radius,
+                               fill=battery_fill_color(percent, palette_rgb))
+    draw.rounded_rectangle([x0, y0, x0 + icon_w, y0 + icon_h], radius=radius, outline=(0, 0, 0), width=stroke)
+    nub_y = y0 + (icon_h - nub_h) // 2
+    nub_radius = _clamped_radius(max(1, nub_w // 3), nub_w, nub_h)
+    draw.rounded_rectangle([x0 + icon_w, nub_y, x0 + icon_w + nub_w, nub_y + nub_h], radius=nub_radius,
+                           fill=(0, 0, 0))
@@ -25,7 +25,7 @@ from fastapi.responses import Response
 from sqlalchemy import select
 from sqlalchemy.orm import Session

-from .. import gitea_releases, grid, quiet_hours
+from .. import gitea_releases, grid, quiet_hours, theme_tokens
 from ..auth import require_frame_control, require_frame_view, require_user_api
 from ..db import frame_locked, get_db
 from ..global_actions import GLOBAL_ACTIONS
@@ -105,6 +105,10 @@ def api_config_save(
    color_boost: float | None = Form(None),
    contrast_boost: float | None = Form(None),
    dither_strength: float | None = Form(None),
+    photo_palette: list[str] | None = Form(None),
+    photo_palette_reset: bool | None = Form(None),
+    photo_dither_strength: float | None = Form(None),
+    theme: str | None = Form(None),
    hold_duration_ms: int | None = Form(None),
    next_hold_action: str | None = Form(None),
    back_hold_action: str | None = Form(None),
@@ -182,6 +186,19 @@ def api_config_save(
            cfg.contrast_boost = max(0.0, min(2.0, contrast_boost))
        if dither_strength is not None:
            cfg.dither_strength = max(0.0, min(1.0, dither_strength))
+        if photo_palette_reset:
+            cfg.photo_palette_rgb = None
+        elif photo_palette is not None:
+            if len(photo_palette) != len(PALETTE_LABELS):
+                raise HTTPException(400, f"Expected {len(PALETTE_LABELS)} palette colors, got {len(photo_palette)}")
+            parsed = [hex_to_rgb(h) for h in photo_palette]
+            if any(rgb is None for rgb in parsed):
+                raise HTTPException(400, "Palette colors must be #rrggbb hex values")
+            cfg.photo_palette_rgb = [list(rgb) for rgb in parsed]
+        if photo_dither_strength is not None:
+            cfg.photo_dither_strength = max(0.0, min(1.0, photo_dither_strength))
+        if theme is not None:
+            cfg.theme = theme if theme in theme_tokens.THEMES else "classic"
        if hold_duration_ms is not None:
            cfg.hold_duration_ms = max(MIN_HOLD_DURATION_MS, min(MAX_HOLD_DURATION_MS, hold_duration_ms))
        if next_hold_action is not None:
@@ -244,6 +261,14 @@ def api_status(
        "device": {
            "last_seen": frame.last_seen or None,
            "overdue": bool(frame.last_seen and now - frame.last_seen > overdue_gap),
+            # When the device is next expected to check in, per the same
+            # sleep duration frame_config() actually hands it (see
+            # device.py's /frame/config) -- not the raw overdue_gap above,
+            # which is deliberately generous (OVERDUE_FACTOR) to avoid
+            # false alarms during quiet hours rather than a best guess.
+            "expected_next_checkin": (
+                frame.last_seen + quiet_hours.effective_refresh_interval_s(frame) if frame.last_seen else None
+            ),
            "firmware_version": frame.device_firmware_version or None,
            "firmware_available": frame.firmware_available_version or None,
            "battery": (
@@ -271,6 +296,25 @@ def api_frame_preview(
    return Response(content=png, media_type="image/png")


+@router.get("/api/frames/{frame_id}/now-displaying")
+def api_frame_now_displaying(frame: Frame = Depends(require_frame_view)):
+    """Exactly what was last actually sent to this frame's device (see
+    routers/device.py's _record_last_displayed) -- the frozen "now
+    displaying" half of the header preview pair, as opposed to /preview's
+    always-live "up next" re-render. 404 (not a placeholder image) until
+    the device has fetched at least once, so the web UI can show its own
+    empty state instead of a broken image. X-Displayed-At carries the
+    capture time (unix seconds) for a "N ago" label -- a header, not the
+    body, since the body is the raw PNG bytes."""
+    if frame.last_displayed_image is None:
+        raise HTTPException(404, "This frame hasn't displayed anything yet")
+    return Response(
+        content=frame.last_displayed_image,
+        media_type="image/png",
+        headers={"X-Displayed-At": str(frame.last_displayed_at)},
+    )
+
+
@router.get("/api/frames/{frame_id}/battery-log")
 def api_battery_log(frame: Frame = Depends(require_frame_view), db: Session = Depends(get_db)):
    rows = db.execute(
@@ -384,6 +428,7 @@ def api_firmware_check(
        "board": frame.device_board_variant or None,
        "latest_version": frame.firmware_gitea_latest_version or None,
        "staged_version": frame.firmware_available_version or None,
+        "running_version": frame.device_firmware_version or None,
        "update_available": update_available,
    }

@@ -56,13 +56,17 @@ LAYOUT_CONFIG_FIELDS: dict[str, tuple[str, ...]] = {
    "photos": ("album_id", "order", "display_mode", "queue_target_len"),
    "calendar": (
        "view", "week_start", "weather_enabled", "weather_units", "weather_cities",
-        "week_days", "week_layout", "week_start_offset",
+        "week_days", "week_layout", "week_start_offset", "render_style",
+    ),
+    "tasks": ("name", "show_completed", "render_style"),
+    "static": ("display_mode", "original_filename", "render_style"),
+    "text": ("content", "font_size", "font_family", "align", "background_color", "render_style"),
+    "whiteboard": ("user_id", "url", "render_style"),
+    "battery": ("mode", "render_style"),
+    "weather": (
+        "mode", "provider", "units", "city_label", "city_latitude", "city_longitude",
+        "hourly_interval_hours", "daily_days", "cities", "render_style",
    ),
-    "tasks": ("name", "show_completed"),
-    "static": ("display_mode", "original_filename"),
-    "text": ("content", "font_size", "font_family", "align", "background_color"),
-    "whiteboard": ("user_id", "url"),
-    "battery": ("mode",),
 }

 # widget_type -> (FrameCalendar|FrameTaskList model, SavedLayoutSource.kind)
@@ -26,7 +26,7 @@ from pydantic import BaseModel
 from sqlalchemy import func, select
 from sqlalchemy.orm import Session

-from .. import calendar_render, grid, photo_queue, quiet_hours, weather, weather_render, webdav_client
+from .. import calendar_render, grid, panel_style, photo_queue, quiet_hours, weather, weather_render, webdav_client
 from ..auth import require_frame_control, require_frame_view, require_user_api
 from ..db import frame_locked, get_db, widget_locked
 from ..image_pipeline import (
@@ -35,11 +35,17 @@ from ..image_pipeline import (
    DEFAULT_STATIC_DISPLAY_MODE,
    DISPLAY_MODES,
    hex_to_rgb,
+    logical_render_size,
    MAX_BORDER_THICKNESS,
    MIN_BORDER_THICKNESS,
    PALETTE_LABELS,
    STATIC_DISPLAY_MODES,
+    panel_size,
    render_preview_png,
+    compose_into,
+    _enhance,
+    _png_bytes,
+    _quantize,
 )
 from ..image_upload import decode_upload
 from ..models import (
@@ -91,7 +97,7 @@ def _widget_dict(w: Widget, locked: bool = False) -> dict:
    return {"id": w.id, "widget_type": w.widget_type, "x": w.x, "y": w.y, "w": w.w, "h": w.h,
            "sort_order": w.sort_order, "border_style": w.border_style,
            "border_thickness": w.border_thickness, "border_color_index": w.border_color_index,
-            "locked": locked}
+            "font_scale": w.font_scale, "locked": locked}


 def require_widget_view(
@@ -275,6 +281,31 @@ def api_widget_border(
    return _widget_dict(widget)


+class WidgetFontScaleRequest(BaseModel):
+    font_scale: float
+
+
+@router.post("/api/frames/{frame_id}/widgets/{widget_id}/font-scale")
+def api_widget_font_scale(
+    body: WidgetFontScaleRequest, frame_widget: tuple[Frame, Widget] = Depends(require_widget_control),
+    db: Session = Depends(get_db),
+):
+    """Sets this widget's text-size multiplier (the Layout dialog's "Text
+    size" picker) -- a shared Widget-level property (see models.Widget.
+    font_scale), not a per-type config field, since any widget type with
+    body text can use it. Its own endpoint for the same reason
+    api_widget_border has one: api_widget_config_save's per-type dispatch
+    edits a config row via widget_locked, and font_scale lives on Widget
+    itself, not any per-type config table."""
+    frame, widget = frame_widget
+    if body.font_scale not in panel_style.FONT_SCALE_CHOICES:
+        raise HTTPException(400, f"font_scale must be one of {panel_style.FONT_SCALE_CHOICES}")
+    with frame_locked(db, frame.id):
+        widget.font_scale = body.font_scale
+        db.commit()
+    return _widget_dict(widget)
+
+
@router.delete("/api/frames/{frame_id}/widgets/{widget_id}")
 def api_widget_delete(
    widget_id: int, frame: Frame = Depends(require_frame_control), db: Session = Depends(get_db)
@@ -317,9 +348,12 @@ def api_widget_config_save(
    album_id: str | None = Form(None),
    order: str | None = Form(None),
    display_mode: str | None = Form(None),
+    static_render_style: str | None = Form(None),
+    whiteboard_render_style: str | None = Form(None),
    queue_target_len: int | None = Form(None),
    # calendar
    calendar_view: str | None = Form(None),
+    calendar_render_style: str | None = Form(None),
    calendar_week_start: int | None = Form(None),
    calendar_week_days: int | None = Form(None),
    calendar_week_layout: str | None = Form(None),
@@ -329,10 +363,12 @@ def api_widget_config_save(
    # tasks
    tasks_name: str | None = Form(None),
    tasks_show_completed: bool | None = Form(None),
+    tasks_render_style: str | None = Form(None),
    # text
    text_html: str | None = Form(None),
    text_font_size: int | None = Form(None),
    text_font_family: str | None = Form(None),
+    text_render_style: str | None = Form(None),
    text_align: str | None = Form(None),
    text_background_color: str | None = Form(None),
    # weather
@@ -341,8 +377,10 @@ def api_widget_config_save(
    weather_units: str | None = Form(None),
    weather_hourly_interval_hours: int | None = Form(None),
    weather_daily_days: int | None = Form(None),
+    weather_render_style: str | None = Form(None),
    # battery
    battery_mode: str | None = Form(None),
+    battery_render_style: str | None = Form(None),
 ):
    """Every field optional -- same partial-update, form-urlencoded
    convention as the old frame-level api_config_save, now scoped to one
@@ -405,6 +443,8 @@ def api_widget_config_save(
                    # new unit label.
                    ccfg.weather_checked_at = 0.0
                ccfg.weather_units = calendar_weather_units
+            if calendar_render_style is not None and calendar_render_style in ("classic", "modern"):
+                ccfg.render_style = calendar_render_style
    elif widget.widget_type == "tasks":
        with widget_locked(db, frame.id, widget.id) as (_, _, tcfg):
            if tasks_name is not None:
@@ -415,10 +455,22 @@ def api_widget_config_save(
            if tasks_show_completed is not None and tasks_show_completed != tcfg.show_completed:
                tcfg.show_completed = tasks_show_completed
                tcfg.checked_at = 0.0  # pick up the change promptly
+            if tasks_render_style is not None and tasks_render_style in ("classic", "modern"):
+                tcfg.render_style = tasks_render_style
    elif widget.widget_type == "static":
        with widget_locked(db, frame.id, widget.id) as (_, _, scfg):
            if display_mode is not None:
                scfg.display_mode = display_mode if display_mode in STATIC_DISPLAY_MODES else DEFAULT_STATIC_DISPLAY_MODE
+            if static_render_style is not None and static_render_style in ("classic", "modern"):
+                scfg.render_style = static_render_style
+    elif widget.widget_type == "whiteboard":
+        # user_id/url go through the dedicated /whiteboard-source endpoint
+        # (owner-only, JSON body) -- render_style is the one setting this
+        # widget type takes through the shared /config form, same as
+        # every other widget type's own render_style.
+        with widget_locked(db, frame.id, widget.id) as (_, _, wbcfg):
+            if whiteboard_render_style is not None and whiteboard_render_style in ("classic", "modern"):
+                wbcfg.render_style = whiteboard_render_style
    elif widget.widget_type == "text":
        with widget_locked(db, frame.id, widget.id) as (_, _, xcfg):
            if text_html is not None:
@@ -439,6 +491,8 @@ def api_widget_config_save(
                xcfg.background_color = (
                    text_background_color if hex_to_rgb(text_background_color) else "#ffffff"
                )
+            if text_render_style is not None and text_render_style in ("classic", "modern"):
+                xcfg.render_style = text_render_style
    elif widget.widget_type == "weather":
        with widget_locked(db, frame.id, widget.id) as (_, _, wcfg):
            if weather_mode is not None and weather_mode in ("current", "hourly", "daily", "multi_city"):
@@ -469,10 +523,14 @@ def api_widget_config_save(
                wcfg.hourly_interval_hours = max(1, min(24, weather_hourly_interval_hours))
            if weather_daily_days is not None:
                wcfg.daily_days = max(1, min(14, weather_daily_days))
+            if weather_render_style is not None and weather_render_style in ("classic", "modern"):
+                wcfg.render_style = weather_render_style
    elif widget.widget_type == "battery":
        with widget_locked(db, frame.id, widget.id) as (_, _, bcfg):
            if battery_mode is not None:
                bcfg.mode = battery_mode if battery_mode in ("compact", "detailed") else "detailed"
+            if battery_render_style is not None and battery_render_style in ("classic", "modern"):
+                bcfg.render_style = battery_render_style
    with frame_locked(db, frame.id) as cfg:
        cfg.stats_config_saves += 1
    return {"status": "saved"}
@@ -726,6 +784,7 @@ def api_widget_preview_rendered(
        source, faces=faces, orientation=frame.orientation, palette_rgb=frame.palette_rgb,
        display_mode=pcfg.display_mode, color_boost=frame.color_boost,
        contrast_boost=frame.contrast_boost, dither_strength=frame.dither_strength,
+        panel_type=frame.panel_type,
    )
    return Response(content=png, media_type="image/png")

@@ -833,14 +892,32 @@ def api_widget_preview_calendar(
    ccfg = db.get(CalendarWidgetConfig, widget.id)
    events, summary = get_or_refresh_calendar_events_for_widget(db, frame, widget)
    weather_cities = get_or_refresh_weather_for_widget(db, frame, widget) if ccfg.weather_enabled else None
-    png = calendar_render.render_calendar_preview_png(
-        events, view=ccfg.view, browse_offset=ccfg.browse_offset, orientation=frame.orientation,
-        palette_rgb=frame.palette_rgb, timezone=frame.timezone, fetch_summary=summary,
-        week_start=ccfg.week_start,
-        weather_cities=weather_cities, weather_units=ccfg.weather_units,
-        week_days=ccfg.week_days, week_layout=ccfg.week_layout,
-        week_start_offset=ccfg.week_start_offset,
-    )
+
+    target_w, target_h = logical_render_size(frame.orientation, *panel_size(frame.panel_type))
+    if ccfg.render_style == "modern":
+        from zoneinfo import ZoneInfo
+
+        from .. import calendar_html_render
+
+        tz = ZoneInfo(frame.timezone) if frame.timezone else ZoneInfo("UTC")
+        img = calendar_html_render.build(
+            events, ccfg.view, ccfg.browse_offset, target_w, target_h, tz, ccfg.week_start, frame.palette_rgb,
+            weather_cities, ccfg.weather_units, ccfg.week_days, ccfg.week_layout, ccfg.week_start_offset,
+            frame.theme, widget.font_scale,
+        )
+        quantized = _quantize(img, frame.palette_rgb, dither_strength=1.0)
+        png = _png_bytes(quantized)
+    else:
+        native_w, native_h = panel_size(frame.panel_type)
+        png = calendar_render.render_calendar_preview_png(
+            events, view=ccfg.view, browse_offset=ccfg.browse_offset, orientation=frame.orientation,
+            palette_rgb=frame.palette_rgb, timezone=frame.timezone, fetch_summary=summary,
+            week_start=ccfg.week_start,
+            weather_cities=weather_cities, weather_units=ccfg.weather_units,
+            week_days=ccfg.week_days, week_layout=ccfg.week_layout,
+            week_start_offset=ccfg.week_start_offset, font_scale=widget.font_scale,
+            panel_w=native_w, panel_h=native_h,
+        )
    return Response(content=png, media_type="image/png")


@@ -859,8 +936,21 @@ def api_widget_preview_tasks(
        raise HTTPException(400, "No task lists included on this widget yet")
    tcfg = db.get(TaskWidgetConfig, widget.id)
    tasks = get_or_refresh_tasks_for_widget(db, frame, widget)
-    png = calendar_render.render_tasks_preview_png(tasks, orientation=frame.orientation,
-                                                    palette_rgb=frame.palette_rgb, title=tcfg.name or "Tasks")
+    title = tcfg.name or "Tasks"
+    if tcfg.render_style == "modern":
+        from .. import html_render
+
+        target_w, target_h = logical_render_size(frame.orientation, *panel_size(frame.panel_type))
+        img = html_render.build_tasks(tasks, target_w, target_h, frame.palette_rgb, title, frame.theme,
+                                      widget.font_scale)
+        quantized = _quantize(img, frame.palette_rgb, dither_strength=1.0)
+        png = _png_bytes(quantized)
+    else:
+        native_w, native_h = panel_size(frame.panel_type)
+        png = calendar_render.render_tasks_preview_png(tasks, orientation=frame.orientation,
+                                                        palette_rgb=frame.palette_rgb, title=title,
+                                                        font_scale=widget.font_scale,
+                                                        panel_w=native_w, panel_h=native_h)
    return Response(content=png, media_type="image/png")


@@ -1108,10 +1198,22 @@ def api_widget_preview_weather(
        if wcfg.mode == "multi_city":
            raise HTTPException(400, "No cities added to this widget yet")
        raise HTTPException(400, "No location set on this widget yet")
-    png = weather_render.render_weather_preview_png(
-        wcfg.mode, data, orientation=frame.orientation, palette_rgb=frame.palette_rgb, units=wcfg.units,
-        city_label=wcfg.city_label or "", interval_hours=wcfg.hourly_interval_hours,
-    )
+    if wcfg.render_style == "modern" and wcfg.mode in ("current", "daily"):
+        # Same local-import reasoning as widgets/weather.py's render().
+        from .. import html_render
+
+        native_w, native_h = panel_size(frame.panel_type)
+        png = html_render.render_weather_preview_png(
+            wcfg.mode, data, orientation=frame.orientation, palette_rgb=frame.palette_rgb, units=wcfg.units,
+            city_label=wcfg.city_label or "", theme_name=frame.theme, panel_w=native_w, panel_h=native_h,
+        )
+    else:
+        native_w, native_h = panel_size(frame.panel_type)
+        png = weather_render.render_weather_preview_png(
+            wcfg.mode, data, orientation=frame.orientation, palette_rgb=frame.palette_rgb, units=wcfg.units,
+            city_label=wcfg.city_label or "", interval_hours=wcfg.hourly_interval_hours,
+            panel_w=native_w, panel_h=native_h,
+        )
    return Response(content=png, media_type="image/png")


@@ -1158,11 +1260,23 @@ def api_widget_preview_static(
    if not scfg.image:
        raise HTTPException(400, "No image uploaded to this widget yet")
    source = Image.open(io.BytesIO(scfg.image)).convert("RGB")
-    png = render_preview_png(
-        source, faces=None, orientation=frame.orientation, palette_rgb=frame.palette_rgb,
-        display_mode=scfg.display_mode, color_boost=frame.color_boost,
-        contrast_boost=frame.contrast_boost, dither_strength=frame.dither_strength,
-    )
+    if scfg.render_style == "modern":
+        from .. import html_render
+
+        target_w, target_h = logical_render_size(frame.orientation, *panel_size(frame.panel_type))
+        composed = compose_into(source, faces=None, target_w=target_w, target_h=target_h,
+                                display_mode=scfg.display_mode)
+        fitted = _enhance(composed, frame.color_boost, frame.contrast_boost)
+        img = html_render.build_framed_image(fitted, target_w, target_h, frame.palette_rgb, frame.theme, "static")
+        quantized = _quantize(img, frame.palette_rgb, dither_strength=1.0)
+        png = _png_bytes(quantized)
+    else:
+        png = render_preview_png(
+            source, faces=None, orientation=frame.orientation, palette_rgb=frame.palette_rgb,
+            display_mode=scfg.display_mode, color_boost=frame.color_boost,
+            contrast_boost=frame.contrast_boost, dither_strength=frame.dither_strength,
+            panel_type=frame.panel_type,
+        )
    return Response(content=png, media_type="image/png")


@@ -1181,7 +1295,9 @@ def api_widget_preview_text(
    xcfg = db.get(TextWidgetConfig, widget.id)
    if not has_text(xcfg.content):
        raise HTTPException(400, "No text authored on this widget yet")
-    png = text_widget.render_preview_png(xcfg, orientation=frame.orientation, palette_rgb=frame.palette_rgb)
+    native_w, native_h = panel_size(frame.panel_type)
+    png = text_widget.render_preview_png(xcfg, orientation=frame.orientation, palette_rgb=frame.palette_rgb,
+                                         theme_name=frame.theme, panel_w=native_w, panel_h=native_h)
    return Response(content=png, media_type="image/png")


@@ -1297,8 +1413,19 @@ def api_widget_preview_whiteboard(
            raise HTTPException(400, "No whiteboard configured on this widget yet")
        raise HTTPException(502, "Could not fetch/render the whiteboard yet -- check the URL and credentials")
    source = Image.open(io.BytesIO(png_bytes)).convert("RGB")
-    png = render_preview_png(
-        source, faces=None, orientation=frame.orientation, palette_rgb=frame.palette_rgb,
-        display_mode="letterbox",
-    )
+    if wcfg.render_style == "modern":
+        from .. import html_render
+
+        target_w, target_h = logical_render_size(frame.orientation, *panel_size(frame.panel_type))
+        composed = compose_into(source, faces=None, target_w=target_w, target_h=target_h,
+                                display_mode="letterbox")
+        img = html_render.build_framed_image(composed, target_w, target_h, frame.palette_rgb, frame.theme,
+                                             "whiteboard")
+        quantized = _quantize(img, frame.palette_rgb, dither_strength=1.0)
+        png = _png_bytes(quantized)
+    else:
+        png = render_preview_png(
+            source, faces=None, orientation=frame.orientation, palette_rgb=frame.palette_rgb,
+            display_mode="letterbox", panel_type=frame.panel_type,
+        )
    return Response(content=png, media_type="image/png")
@@ -18,7 +18,7 @@ from sqlalchemy.orm import Session

 from .. import caldav_client, calendar_feed, grid, quiet_hours, weather, whiteboard
 from ..db import widget_locked
-from ..image_pipeline import logical_render_size
+from ..image_pipeline import logical_render_size, panel_size
 from ..immich_client import ImmichClient
 from ..models import (
    BatteryLog,
@@ -59,6 +59,12 @@ MIN_ESTIMATE_SAMPLES = 5  # discharge steps needed before trusting the average
 # single noisy reading needs rejecting at the per-wake-drop level, not
 # just at the recharge-detection level.
 OUTLIER_MODIFIED_Z_THRESHOLD = 3.5
+# Readings considered on each side of a given reading when
+# _smooth_percents looks for local outliers. Needs to be at least half
+# the length of the longest bad-reading burst a noisy divider produces
+# (observed up to ~4 consecutive corrupted reports on one frame) so the
+# good neighbors still outnumber the bad ones in the window.
+BATTERY_SMOOTHING_WINDOW = 4

 # "Overdue" threshold multiplier: the device should check in roughly every
 # refresh_interval_s; give it half again as long before flagging it.
@@ -179,6 +185,50 @@ def _reject_outlier_drops(steps: list[tuple[int, float]]) -> list[tuple[int, flo
    return kept or steps  # never filter down to nothing


+def _smooth_percents(percents: list[int]) -> list[float]:
+    """Replaces any reading that's a wild outlier against its own local
+    neighborhood with that neighborhood's median, before per-wake drop
+    steps are ever built from the series.
+
+    _reject_outlier_drops (above) only catches a bad reading by how much
+    it distorts the *steps* immediately on either side of it -- which is
+    exactly what one isolated glitch does, but a 1M-ohm divider (see
+    firmware/main/battery.c) doesn't always misfire in isolation: several
+    consecutive reports can drift or glitch together (a multi-minute
+    crawl from 68 up into the high 70s with nothing charging, or a run of
+    several ~40 reports spliced into an otherwise flat ~53 run). A step
+    computed *between* two bad readings in the same burst looks like an
+    ordinary small change, not an outlier, so it sails through
+    _reject_outlier_drops untouched.
+
+    A Hampel identifier catches that instead: each reading is compared to
+    the median of its own local window (not the whole series), using the
+    same MAD-based modified z-score as _reject_outlier_drops so this
+    adapts to how noisy a given frame's sensor actually is rather than a
+    fixed percent-point cutoff. A window of BATTERY_SMOOTHING_WINDOW
+    reports on each side tolerates a bad burst up to that long while
+    still being outvoted by the surrounding good readings."""
+    n = len(percents)
+    smoothed = list(percents)
+    for i in range(n):
+        lo = max(0, i - BATTERY_SMOOTHING_WINDOW)
+        hi = min(n, i + BATTERY_SMOOTHING_WINDOW + 1)
+        neighborhood = percents[lo:hi]
+        median = statistics.median(neighborhood)
+        abs_devs = [abs(v - median) for v in neighborhood]
+        # Unlike _reject_outlier_drops, no mean-of-abs-devs fallback here:
+        # a burst can be a big enough share of this small a window that
+        # the mean itself gets dragged up by the very values being
+        # tested, hiding them. A flat 1-percentage-point floor -- this
+        # project's smallest real unit of noise -- keeps the test from
+        # dividing by zero without being skewed by the burst it's
+        # checking.
+        mad = statistics.median(abs_devs) or 1
+        if abs(0.6745 * (percents[i] - median) / mad) > OUTLIER_MODIFIED_Z_THRESHOLD:
+            smoothed[i] = median
+    return smoothed
+
+
 def battery_estimate_s(frame: Frame, db: Session) -> int | None:
    """Remaining-time estimate from a recency-weighted average of the
    *per-wake* percent drop, over the last BATTERY_ESTIMATE_SAMPLE_COUNT
@@ -189,18 +239,21 @@ def battery_estimate_s(frame: Frame, db: Session) -> int | None:

    Consecutive reports are assumed to be consecutive wakes (firmware
    reports battery on every wake while on battery), so each step's
-    (prev_percent - next_percent) is that wake's cost. A step where
-    percent went *up* is a recharge, not negative drain, and is skipped
-    entirely rather than folded in as a weird outlier; a flat step
-    (0% change) still counts as a real, cheap wake -- excluding those
-    would systematically overstate the per-wake cost by only counting
-    the wakes that happened to tick the percentage down. The remaining
-    steps then get one more pass, _reject_outlier_drops, to catch the
-    single-noisy-reading case that "percent went up" alone can't (see
-    that function's docstring). Steps are weighted linearly by recency
-    (step i of n gets weight i, 1-indexed) so a recent change in usage
-    pattern shows up quickly instead of being washed out by a long flat
-    history.
+    (prev_percent - next_percent) is that wake's cost. Raw percents go
+    through _smooth_percents first, which corrects readings (including
+    short bursts of them) that are wild outliers against their own local
+    neighborhood -- see that function's docstring for why that catches
+    noise shapes _reject_outlier_drops can't. A step where percent went
+    *up* is a recharge, not negative drain, and is skipped entirely
+    rather than folded in as a weird outlier; a flat step (0% change)
+    still counts as a real, cheap wake -- excluding those would
+    systematically overstate the per-wake cost by only counting the
+    wakes that happened to tick the percentage down. The remaining steps
+    then get one more pass, _reject_outlier_drops, to catch whatever
+    single-noisy-reading shape survives smoothing (see that function's
+    docstring). Steps are weighted linearly by recency (step i of n gets
+    weight i, 1-indexed) so a recent change in usage pattern shows up
+    quickly instead of being washed out by a long flat history.

    The resulting %/wake rate is then converted to wall-clock time using
    the frame's *current* refresh_interval_s and quiet-hours settings
@@ -220,6 +273,7 @@ def battery_estimate_s(frame: Frame, db: Session) -> int | None:
    if len(rows) < MIN_ESTIMATE_SAMPLES + 1:
        return None
    percents = list(reversed(rows))  # chronological order
+    percents = _smooth_percents(percents)

    steps: list[tuple[int, float]] = []  # (recency_weight, drop_pct)
    for i in range(1, len(percents)):
@@ -460,7 +514,7 @@ def build_manage_content(db: Session, frame: Frame, request) -> dict:
    if any(db.get(PhotoWidgetConfig, w.id).current_asset_id for w in photo_widgets):
        content["share_url"] = f"{base}/frame/share/{frame.manage_token}"

-    panel_w, panel_h = logical_render_size(frame.orientation)
+    panel_w, panel_h = logical_render_size(frame.orientation, *panel_size(frame.panel_type))
    face_labels: list[dict] = []
    for widget in photo_widgets:
        cfg = db.get(PhotoWidgetConfig, widget.id)
@@ -14,6 +14,7 @@ from __future__ import annotations

 import logging
 import time
+from concurrent.futures import ThreadPoolExecutor

 from fastapi import APIRouter, Depends, HTTPException, Request
 from fastapi.responses import FileResponse, Response
@@ -23,10 +24,17 @@ from sqlalchemy.orm import Session

 from .. import grid, mail, quiet_hours
 from ..auth import get_server_settings, require_device
-from ..db import frame_locked, get_db
+from ..db import SessionLocal, frame_locked, get_db
 from ..firmware import firmware_path
 from ..global_actions import GLOBAL_ACTIONS
-from ..image_pipeline import draw_widget_border, logical_render_size, render_panel, render_placeholder, resolve_border_color
+from ..image_pipeline import (
+    draw_widget_border,
+    logical_render_size,
+    panel_size,
+    render_panel,
+    render_placeholder,
+    resolve_border_color,
+)
 from ..models import BatteryLog, Frame, FrameButtonAction, Widget
 from ..widgets import WIDGET_TYPES
 from .common import (
@@ -43,7 +51,7 @@ router = APIRouter()


 def _setup_placeholder(frame: Frame, request: Request, manage: dict | None = None,
-                       as_png: bool = False) -> bytes:
+                       as_png: bool = False, capture_snapshot: bool = False) -> bytes | tuple[bytes, bytes]:
    """What an unclaimed or widget-less frame displays instead of real
    content -- instructions with a QR, rendered at 200 so the device
    treats it as a perfectly normal image and never error-loops. The
@@ -60,6 +68,8 @@ def _setup_placeholder(frame: Frame, request: Request, manage: dict | None = Non
            palette_rgb=frame.palette_rgb,
            manage=manage,
            as_png=as_png,
+            capture_snapshot=capture_snapshot,
+            panel_type=frame.panel_type,
        )
    if frame.owner_user_id is None:
        return render_placeholder(
@@ -68,6 +78,8 @@ def _setup_placeholder(frame: Frame, request: Request, manage: dict | None = Non
            palette_rgb=frame.palette_rgb,
            manage=manage,
            as_png=as_png,
+            capture_snapshot=capture_snapshot,
+            panel_type=frame.panel_type,
        )
    return render_placeholder(
        ["Almost there!", "Add a widget for this frame at", base],
@@ -76,11 +88,47 @@ def _setup_placeholder(frame: Frame, request: Request, manage: dict | None = Non
        palette_rgb=frame.palette_rgb,
        manage=manage,
        as_png=as_png,
+        capture_snapshot=capture_snapshot,
+        panel_type=frame.panel_type,
    )


+def _render_one_widget(frame_id: int, widget_id: int, orientation: str, panel_w: int, panel_h: int,
+                       cell: tuple[int, int, int, int], is_normal_wake: bool,
+                       ) -> tuple[tuple[int, int, int, int], object] | None:
+    """Renders exactly one widget on its own DB session, so several of
+    these can run concurrently in a thread pool -- see app/db.py's
+    module docstring: handlers already run multi-threaded (sync
+    handlers in FastAPI's threadpool, one process), and frame_locked/
+    widget_locked's per-frame threading.Lock is what makes that safe,
+    not anything about which Session object is in play. A SQLAlchemy
+    Session itself is never safe to share across threads, so each
+    concurrent render gets a fresh one rather than reusing the
+    request's. Most of a widget's render time is spent waiting on an
+    external call (Immich, a weather provider, CalDAV) with the DB
+    untouched, which is exactly the time this buys back."""
+    db = SessionLocal()
+    try:
+        frame = db.get(Frame, frame_id)
+        widget = db.get(Widget, widget_id)
+        if widget is None:
+            return None  # deleted between the listing query and this fetch -- skip it, not a 500
+        module = WIDGET_TYPES.get(widget.widget_type)
+        if module is None:
+            return None  # unrecognized widget_type -- shouldn't happen, skip defensively rather than 500
+        px, py, pw, ph = grid.cell_to_pixels(orientation, panel_w, panel_h, cell)
+        img = module.render(db, frame, widget, pw, ph, is_normal_wake=is_normal_wake)
+        draw_widget_border(
+            img, widget.border_style, widget.border_thickness,
+            resolve_border_color(widget.border_color_index, frame.palette_rgb),
+        )
+        return (px, py, pw, ph), img
+    finally:
+        db.close()
+
+
 def _render_widgets(db: Session, frame: Frame, manage: dict | None, is_normal_wake: bool,
-                    as_png: bool = False) -> bytes:
+                    as_png: bool = False, capture_snapshot: bool = False) -> bytes | tuple[bytes, bytes]:
    """The widget-system compositor: renders every widget on this frame
    into its own region (see app/grid.py for grid-cell -> pixel math),
    draws that widget's own optional border directly onto its region
@@ -89,34 +137,46 @@ def _render_widgets(db: Session, frame: Frame, manage: dict | None, is_normal_wa
    image_pipeline.render_panel for the single shared paste/enhance/
    overlay/quantize/pack pass. Replaces the old per-mode RENDERERS
    dict -- a frame can now show several widgets at once instead of
-    exactly one mode owning the whole panel."""
+    exactly one mode owning the whole panel.
+
+    Widgets render concurrently (_render_one_widget, each on its own DB
+    session) rather than one at a time -- a layout with several
+    network-backed widgets (photos, weather, calendar) previously paid
+    their fetch latency serially, which could push a single /frame/*
+    response past the firmware's fixed HTTP timeout and show a
+    misleading "server failed" status screen even though the server
+    was simply still working. Futures are submitted in sort_order and
+    collected in that same order (not completion order) -- overlapping
+    widgets must still paint in the original z-order."""
    all_widgets = db.scalars(
        select(Widget).where(Widget.frame_id == frame.id).order_by(Widget.sort_order)
    ).all()
-    panel_w, panel_h = logical_render_size(frame.orientation)
+    panel_w, panel_h = logical_render_size(frame.orientation, *panel_size(frame.panel_type))
    regions = []
-    for widget in all_widgets:
-        module = WIDGET_TYPES.get(widget.widget_type)
-        if module is None:
-            continue  # unrecognized widget_type -- shouldn't happen, skip defensively rather than 500
-        px, py, pw, ph = grid.cell_to_pixels(
-            frame.orientation, panel_w, panel_h, (widget.x, widget.y, widget.w, widget.h)
-        )
-        img = module.render(db, frame, widget, pw, ph, is_normal_wake=is_normal_wake)
-        draw_widget_border(
-            img, widget.border_style, widget.border_thickness,
-            resolve_border_color(widget.border_color_index, frame.palette_rgb),
-        )
-        regions.append(((px, py, pw, ph), img))
+    if all_widgets:
+        with ThreadPoolExecutor(max_workers=min(len(all_widgets), 8)) as pool:
+            futures = [
+                pool.submit(
+                    _render_one_widget, frame.id, widget.id, frame.orientation, panel_w, panel_h,
+                    (widget.x, widget.y, widget.w, widget.h), is_normal_wake,
+                )
+                for widget in all_widgets
+            ]
+            for future in futures:
+                result = future.result()
+                if result is not None:
+                    regions.append(result)
    return render_panel(
        regions, orientation=frame.orientation, palette_rgb=frame.palette_rgb,
        color_boost=frame.color_boost, contrast_boost=frame.contrast_boost,
        dither_strength=frame.dither_strength, manage=manage, as_png=as_png,
+        capture_snapshot=capture_snapshot, panel_type=frame.panel_type,
    )


 def _render_frame_content(db: Session, frame: Frame, request: Request | None, manage: dict | None,
-                          is_normal_wake: bool, as_png: bool = False) -> bytes:
+                          is_normal_wake: bool, as_png: bool = False,
+                          capture_snapshot: bool = False) -> bytes | tuple[bytes, bytes]:
    """The top-level "what does this frame show right now" entry point.
    An unclaimed frame or one with no widgets yet gets the setup
    placeholder (needs `request` for its QR URLs -- only available on the
@@ -134,11 +194,12 @@ def _render_frame_content(db: Session, frame: Frame, request: Request | None, ma
        if request is None:
            return render_placeholder(
                ["Almost there!"], orientation=frame.orientation, palette_rgb=frame.palette_rgb,
-                manage=manage, as_png=as_png,
+                manage=manage, as_png=as_png, capture_snapshot=capture_snapshot,
+                panel_type=frame.panel_type,
            )
-        return _setup_placeholder(frame, request, manage=manage, as_png=as_png)
+        return _setup_placeholder(frame, request, manage=manage, as_png=as_png, capture_snapshot=capture_snapshot)

-    return _render_widgets(db, frame, manage, is_normal_wake, as_png=as_png)
+    return _render_widgets(db, frame, manage, is_normal_wake, as_png=as_png, capture_snapshot=capture_snapshot)


 def render_frame_preview_png(db: Session, frame: Frame, request: Request) -> bytes:
@@ -201,6 +262,23 @@ def _run_global_action(db: Session, frame: Frame, button: str) -> None:
        logger.exception("Global hold action %r failed for frame %d", action, frame.id)


+# Maps a device's self-reported board (X-Frame-Board, CONFIG_FRAME_BOARD_
+# NAME) to which EPD panel it drives -- the panel type is a property of
+# the board's firmware, not something a person picks in the UI (see
+# Frame.panel_type). Includes both the legacy bare names ("devkit",
+# "xiao") already baked into fielded firmware and the current chip-
+# qualified names ("devkit_esp32c6", "xiao_esp32c6") -- keep both
+# indefinitely, since already-flashed devices can't be retroactively
+# renamed and there's no cost to accepting either.
+BOARD_PANEL_MAP = {
+    "devkit": "epd7in3e",
+    "xiao": "epd7in3e",
+    "devkit_esp32c6": "epd7in3e",
+    "xiao_esp32c6": "epd7in3e",
+    "ee02": "epd13in3e",
+}
+
+
@router.get("/frame/config")
 def frame_config(request: Request, frame: Frame = Depends(require_device), db: Session = Depends(get_db)):
    """Device-facing settings, polled by the frame alongside its
@@ -209,7 +287,10 @@ def frame_config(request: Request, frame: Frame = Depends(require_device), db: S
    signal. Also captures the device's running firmware version and board
    variant (X-Frame-Version/X-Frame-Board headers) and advertises the
    available OTA image's version, so the device's update check costs
-    zero extra round trips."""
+    zero extra round trips. The reported board also auto-sets
+    Frame.panel_type (see BOARD_PANEL_MAP) -- which EPD panel a frame
+    renders for is derived from what the hardware reports, never a manual
+    setting."""
    reported_version = request.headers.get("X-Frame-Version", "")
    reported_board = request.headers.get("X-Frame-Board", "")
    with frame_locked(db, frame.id) as locked:
@@ -222,6 +303,9 @@ def frame_config(request: Request, frame: Frame = Depends(require_device), db: S
            locked.device_firmware_version = reported_version
        if reported_board:
            locked.device_board_variant = reported_board
+            mapped_panel = BOARD_PANEL_MAP.get(reported_board)
+            if mapped_panel and mapped_panel != locked.panel_type:
+                locked.panel_type = mapped_panel

        response = {
            "refresh_interval_s": quiet_hours.effective_refresh_interval_s(locked),
@@ -232,11 +316,10 @@ def frame_config(request: Request, frame: Frame = Depends(require_device), db: S
            # firmware/main/next_button.c, app/global_actions.py).
            "hold_duration_ms": locked.hold_duration_ms,
        }
-        # Per-frame token push: only once the device has introduced itself
-        # by id (so the response to pure-legacy firmware stays byte-
-        # compatible with its 256-byte parse buffer), and only until the
-        # device has authenticated with the token once (device_token_ack).
-        if locked.device_id is not None and not locked.device_token_ack:
+        # Per-frame token push: only until the device has authenticated
+        # with it once (device_token_ack) -- no reason to keep sending it
+        # on every wake once the device has it.
+        if not locked.device_token_ack:
            response["device_token"] = locked.device_token
    return response

@@ -245,6 +328,17 @@ def _manage_flag(request: Request) -> bool:
    return request.query_params.get("manage") == "1"


+def _record_last_displayed(db: Session, frame: Frame, png_snapshot: bytes) -> None:
+    """Persists exactly what a device-facing render just sent (upright
+    PNG, manage overlay included if present -- whatever's actually on the
+    panel) as this frame's "now displaying" snapshot, the frozen half of
+    the web UI's header preview pair (see api_frames.py's /now-displaying
+    endpoint and its always-live "up next" counterpart, /preview)."""
+    with frame_locked(db, frame.id) as locked:
+        locked.last_displayed_image = png_snapshot
+        locked.last_displayed_at = time.time()
+
+
@router.get("/frame/image")
 def frame_image(
    request: Request, frame: Frame = Depends(require_device), db: Session = Depends(get_db)
@@ -262,9 +356,14 @@ def frame_image(
    ?manage=1 (the manage button) composites the manage overlay onto
    whatever this would have returned anyway -- see build_manage_content.
    This is also the "normal wake" that resets any calendar widget's
-    browse position back to today (see app/widgets/calendar.py)."""
+    browse position back to today (see app/widgets/calendar.py).
+
+    Also records what's returned as this frame's "now displaying"
+    snapshot (see _record_last_displayed) -- every other device-facing
+    render endpoint below does the same."""
    manage = build_manage_content(db, frame, request) if _manage_flag(request) else None
-    content = _render_frame_content(db, frame, request, manage, is_normal_wake=True)
+    content, snapshot = _render_frame_content(db, frame, request, manage, is_normal_wake=True, capture_snapshot=True)
+    _record_last_displayed(db, frame, snapshot)
    return Response(content=content, media_type="application/octet-stream")


@@ -277,7 +376,10 @@ def frame_advance(request: Request, frame: Frame = Depends(require_device), db:
    device's next-photo button."""
    _run_button_actions(db, frame, "next")
    manage = build_manage_content(db, frame, request) if _manage_flag(request) else None
-    content = _render_frame_content(db, frame, request=None, manage=manage, is_normal_wake=False)
+    content, snapshot = _render_frame_content(
+        db, frame, request=None, manage=manage, is_normal_wake=False, capture_snapshot=True
+    )
+    _record_last_displayed(db, frame, snapshot)
    return Response(content=content, media_type="application/octet-stream")


@@ -288,7 +390,10 @@ def frame_back(request: Request, frame: Frame = Depends(require_device), db: Ses
    with nothing to go back to. Used by the device's back-photo button."""
    _run_button_actions(db, frame, "back")
    manage = build_manage_content(db, frame, request) if _manage_flag(request) else None
-    content = _render_frame_content(db, frame, request=None, manage=manage, is_normal_wake=False)
+    content, snapshot = _render_frame_content(
+        db, frame, request=None, manage=manage, is_normal_wake=False, capture_snapshot=True
+    )
+    _record_last_displayed(db, frame, snapshot)
    return Response(content=content, media_type="application/octet-stream")


@@ -303,7 +408,10 @@ def frame_global_next(request: Request, frame: Frame = Depends(require_device),
    firmware/main/next_button.c for the short/long split."""
    _run_global_action(db, frame, "next")
    manage = build_manage_content(db, frame, request) if _manage_flag(request) else None
-    content = _render_frame_content(db, frame, request=None, manage=manage, is_normal_wake=False)
+    content, snapshot = _render_frame_content(
+        db, frame, request=None, manage=manage, is_normal_wake=False, capture_snapshot=True
+    )
+    _record_last_displayed(db, frame, snapshot)
    return Response(content=content, media_type="application/octet-stream")


@@ -312,7 +420,10 @@ def frame_global_back(request: Request, frame: Frame = Depends(require_device),
    """The mirror of /frame/global-next, for a held BACK button."""
    _run_global_action(db, frame, "back")
    manage = build_manage_content(db, frame, request) if _manage_flag(request) else None
-    content = _render_frame_content(db, frame, request=None, manage=manage, is_normal_wake=False)
+    content, snapshot = _render_frame_content(
+        db, frame, request=None, manage=manage, is_normal_wake=False, capture_snapshot=True
+    )
+    _record_last_displayed(db, frame, snapshot)
    return Response(content=content, media_type="application/octet-stream")


@@ -17,7 +17,7 @@ from fastapi.templating import Jinja2Templates
 from sqlalchemy import select
 from sqlalchemy.orm import Session

-from .. import weather
+from .. import panel_style, theme_tokens, weather
 from ..auth import can_view_frame, current_user
 from ..calendar_render import CALENDAR_VIEW_LABELS
 from ..db import get_db
@@ -25,11 +25,13 @@ from ..global_actions import GLOBAL_ACTION_LABELS
 from ..image_pipeline import (
    BORDER_STYLES,
    BORDER_STYLE_LABELS,
+    CALIBRATED_SPECTRA6_RGB,
    DEFAULT_PALETTE_RGB,
    DISPLAY_MODE_LABELS,
    MAX_BORDER_THICKNESS,
    MIN_BORDER_THICKNESS,
    PALETTE_LABELS,
+    PANEL_LABELS,
    STATIC_DISPLAY_MODES,
    palette_to_hex,
 )
@@ -88,10 +90,13 @@ def frame_config_page(frame_id: int, request: Request, db: Session = Depends(get
        request, db, frame_id, "frame_config.html", "config",
        timezones=ALL_TIMEZONES,
        palette_labels=PALETTE_LABELS,
+        panel_labels=PANEL_LABELS,
        default_palette_rgb=DEFAULT_PALETTE_RGB,
+        calibrated_spectra6_hex=palette_to_hex(CALIBRATED_SPECTRA6_RGB),
        palette_to_hex=palette_to_hex,
        photo_widget_id=photo_widget_id,
        global_action_labels=GLOBAL_ACTION_LABELS,
+        themes=theme_tokens.THEMES,
    )


@@ -255,6 +260,16 @@ def widget_dialog(frame_id: int, widget_id: int, request: Request, db: Session =
        "back_button_action": bindings.get("back", ""),
    }

+    # The shared "Text size" card (_widget_font_scale_fields.html,
+    # models.Widget.font_scale) -- only included on the dialogs whose
+    # on-panel content is mostly body text (calendar/tasks; the other
+    # types are either image-only or, for text, already have their own
+    # richer per-widget font_size control -- see TextWidgetConfig).
+    font_scale_labels = {1.0: "Normal", 1.25: "Large", 1.5: "X-Large"}
+    font_scale_ctx = {
+        "font_scale_choices": [(v, font_scale_labels[v]) for v in panel_style.FONT_SCALE_CHOICES],
+    }
+
    if widget.widget_type == "photos":
        photo_cfg = db.get(PhotoWidgetConfig, widget.id)
        return templates.TemplateResponse("_widget_dialog_photos.html", {
@@ -270,7 +285,7 @@ def widget_dialog(frame_id: int, widget_id: int, request: Request, db: Session =
            "calendar_users": _calendar_users_for_widget(db, frame.id, widget.id, user.id),
            "week_start_labels": WEEK_START_LABELS,
            "calendar_color_labels": PALETTE_LABELS,
-            **border_ctx, **button_ctx,
+            **border_ctx, **button_ctx, **font_scale_ctx,
        })

    if widget.widget_type == "tasks":
@@ -279,7 +294,7 @@ def widget_dialog(frame_id: int, widget_id: int, request: Request, db: Session =
            "request": request, "frame": frame, "widget": widget, "task_cfg": task_cfg, "user": user,
            "task_users": _task_users_for_widget(db, frame.id, widget.id, user.id),
            "task_color_labels": PALETTE_LABELS,
-            **border_ctx, **button_ctx,
+            **border_ctx, **button_ctx, **font_scale_ctx,
        })

    if widget.widget_type == "static":
@@ -304,6 +319,7 @@ def widget_dialog(frame_id: int, widget_id: int, request: Request, db: Session =
        )
        return templates.TemplateResponse("_widget_dialog_whiteboard.html", {
            "request": request, "frame": frame, "widget": widget, "user": user,
+            "whiteboard_cfg": whiteboard_cfg,
            "whiteboard_source": _whiteboard_source_info(db, whiteboard_cfg),
            "viewer_has_webdav_creds": viewer_has_webdav_creds, **border_ctx, **button_ctx,
        })
@@ -13,7 +13,7 @@ import logging
 import time

 from fastapi import APIRouter, Depends, Form, HTTPException, Request
-from fastapi.responses import HTMLResponse, RedirectResponse
+from fastapi.responses import FileResponse, HTMLResponse, RedirectResponse
 from fastapi.templating import Jinja2Templates
 from sqlalchemy import select
 from sqlalchemy.orm import Session
@@ -35,6 +35,7 @@ from ..auth import (
    verify_password,
 )
 from ..db import get_db
+from ..logging_setup import LOG_PATH, read_log_tail
 from ..models import Frame, PasswordResetToken, PendingClaim, User, UserFrame
 from .common import valid_http_url

@@ -561,6 +562,8 @@ def _render_admin(request: Request, db: Session, admin: User, notice: str | None
    users_by_id = {u.id: u for u in users}
    for link in links:
        links_by_frame.setdefault(link.frame_id, []).append(users_by_id[link.user_id])
+    from ..image_pipeline import PANEL_LABELS
+
    ctx = shell_context(request, db, admin, active_nav="admin")
    ctx.update({
        "users": users,
@@ -569,6 +572,8 @@ def _render_admin(request: Request, db: Session, admin: User, notice: str | None
        "smtp": get_server_settings(db),
        "notice": notice,
        "error": error,
+        "active_admin_tab": "main",
+        "panel_labels": PANEL_LABELS,
    })
    return templates.TemplateResponse("admin.html", ctx)

@@ -583,6 +588,35 @@ def admin_page(request: Request, db: Session = Depends(get_db)):
    return _render_admin(request, db, user)


+@router.get("/admin/logs", response_class=HTMLResponse)
+def admin_logs_page(request: Request, lines: int = 500, db: Session = Depends(get_db)):
+    user = current_user(request, db)
+    if user is None:
+        return RedirectResponse("/login", status_code=303)
+    if not user.is_admin:
+        raise HTTPException(403, "Admin only")
+    from .common import shell_context
+
+    lines = max(50, min(lines, 5000))
+    ctx = shell_context(request, db, user, active_nav="admin")
+    ctx.update({
+        "active_admin_tab": "logs",
+        "log_exists": LOG_PATH.exists(),
+        "log_path": str(LOG_PATH),
+        "log_lines": lines,
+        "log_text": read_log_tail(lines),
+    })
+    return templates.TemplateResponse("admin_logs.html", ctx)
+
+
+@router.get("/admin/logs/download")
+def admin_logs_download(request: Request, db: Session = Depends(get_db)):
+    _require_admin_page(request, db)
+    if not LOG_PATH.exists():
+        raise HTTPException(404, "No log file yet")
+    return FileResponse(LOG_PATH, filename="server.log", media_type="text/plain")
+
+
@router.post("/admin/users", response_class=HTMLResponse)
 def admin_create_user(
    request: Request,
@@ -676,26 +710,6 @@ def admin_link_user(
                         notice=f"Linked '{target.username}' to frame #{frame_id}.")


-@router.post("/admin/frames/{frame_id}/end-legacy", response_class=HTMLResponse)
-def admin_end_legacy(
-    frame_id: int,
-    request: Request,
-    csrf_token: str = Form(""),
-    db: Session = Depends(get_db),
-):
-    """Closes the legacy-token migration window once the device is
-    confirmed on per-frame auth (device_token_ack + recent last_seen in
-    the frames table below)."""
-    admin = _require_admin_page(request, db)
-    _check_form_csrf(request, db, csrf_token)
-    frame = db.get(Frame, frame_id)
-    if frame is None:
-        return _render_admin(request, db, admin, error="No such frame.")
-    frame.legacy_token_enabled = False
-    db.commit()
-    return _render_admin(request, db, admin, notice=f"Legacy token disabled for frame #{frame_id}.")
-
-
@router.post("/admin/smtp", response_class=HTMLResponse)
 def admin_smtp_save(
    request: Request,
@@ -58,6 +58,15 @@
  }
 })();

+// Registering this is what makes Chrome/Android offer the "Add to Home
+// screen" install prompt -- a manifest link alone isn't enough. Served
+// from /sw.js (not /static/sw.js) so its scope is the whole app.
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", function () {
+    navigator.serviceWorker.register("/sw.js");
+  });
+}
+
 // Shared display names for widget_type, everywhere one shows up in the
 // UI (Layout canvas, Add-a-widget buttons, button-assignment dropdowns).
 const WIDGET_LABELS = {
@@ -18,6 +18,14 @@ function renderDeviceStatusBar(device) {
  }
  const now = Date.now() / 1000;
  const rows = [];
+  if (device.expected_next_checkin) {
+    const remaining = device.expected_next_checkin - now;
+    rows.push([
+      'Expected in',
+      remaining > 0 ? `~${formatDuration(remaining)}` : 'Any moment',
+      device.overdue,
+    ]);
+  }
  const ago = formatDuration(Math.max(0, now - device.last_seen));
  rows.push(['Last seen', `${ago} ago`, device.overdue]);
  if (device.firmware_version) {
@@ -114,7 +114,7 @@ async function loadControl() {

 document.getElementById('take-control').addEventListener('click', takeControl);

-// ---- Advanced configuration: color palette ----
+// ---- Advanced configuration: color palette(s) ----
 //
 // Hex field and R/G/B number fields are kept in sync live, both
 // directions -- editing either updates the other plus the preview
@@ -122,9 +122,15 @@ document.getElementById('take-control').addEventListener('click', takeControl);
 // the server already validates as #rrggbb); the R/G/B fields are purely
 // an alternate, more precise way to arrive at the same value than
 // eyeballing a color-picker swatch.
+//
+// Parameterized by classPrefix ("palette" for the main one, "photo-
+// palette" for the photos-only one added alongside it) rather than
+// duplicated wholesale -- there are exactly two real instances of this,
+// not a speculative future one, and the two would otherwise be ~90
+// near-identical lines apart.

-function paletteHexInputs() {
-  return Array.from(document.querySelectorAll('.palette-hex'))
+function paletteHexInputs(classPrefix) {
+  return Array.from(document.querySelectorAll(`.${classPrefix}-hex`))
    .sort((a, b) => Number(a.dataset.index) - Number(b.dataset.index));
 }

@@ -140,45 +146,53 @@ function rgbFromHex(hex) {
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
 }

-function paletteFieldsFor(index) {
+function paletteFieldsFor(classPrefix, index) {
  const at = (cls) => document.querySelector(`.${cls}[data-index="${index}"]`);
-  return { hex: at('palette-hex'), r: at('palette-r'), g: at('palette-g'), b: at('palette-b'), swatch: at('palette-swatch-preview') };
+  return {
+    hex: at(`${classPrefix}-hex`), r: at(`${classPrefix}-r`), g: at(`${classPrefix}-g`), b: at(`${classPrefix}-b`),
+    swatch: at(`${classPrefix}-swatch-preview`),
+  };
 }

-function syncPaletteFromHex(index) {
-  const f = paletteFieldsFor(index);
+function syncPaletteFromHex(classPrefix, index) {
+  const f = paletteFieldsFor(classPrefix, index);
  const rgb = rgbFromHex(f.hex.value);
  if (!rgb) return;
  [f.r.value, f.g.value, f.b.value] = rgb;
  f.swatch.style.background = f.hex.value;
 }

-function syncPaletteFromRgb(index) {
-  const f = paletteFieldsFor(index);
+function syncPaletteFromRgb(classPrefix, index) {
+  const f = paletteFieldsFor(classPrefix, index);
  const hex = hexFromRgb(f.r.value, f.g.value, f.b.value);
  f.hex.value = hex;
  f.swatch.style.background = hex;
 }

-const palettePickerCount = paletteHexInputs().length;
-for (let i = 0; i < palettePickerCount; i++) {
-  const f = paletteFieldsFor(i);
-  f.hex.addEventListener('input', () => syncPaletteFromHex(i));
-  [f.r, f.g, f.b].forEach((el) => el.addEventListener('input', () => syncPaletteFromRgb(i)));
+function wirePaletteInputs(classPrefix) {
+  const count = paletteHexInputs(classPrefix).length;
+  for (let i = 0; i < count; i++) {
+    const f = paletteFieldsFor(classPrefix, i);
+    f.hex.addEventListener('input', () => syncPaletteFromHex(classPrefix, i));
+    [f.r, f.g, f.b].forEach((el) => el.addEventListener('input', () => syncPaletteFromRgb(classPrefix, i)));
+  }
 }

+wirePaletteInputs('palette');
+wirePaletteInputs('photo-palette');
+
 // Sliders: live numeric readout next to each, no save until the button
 // below is clicked.
-['color_boost', 'contrast_boost', 'dither_strength'].forEach((id) => {
+['color_boost', 'contrast_boost', 'dither_strength', 'photo_dither_strength'].forEach((id) => {
  const input = document.getElementById(id);
  const readout = document.getElementById(`${id}_value`);
  input.addEventListener('input', () => { readout.textContent = Number(input.value).toFixed(2); });
 });

-async function savePalette(extra) {
+async function savePalette(classPrefix, paletteFormKey, extra) {
  const body = new URLSearchParams(extra || {});
-  for (const input of paletteHexInputs()) {
-    body.append('palette', input.value);
+  for (const input of paletteHexInputs(classPrefix)) {
+    body.append(paletteFormKey, input.value);
  }
  try {
    const resp = await fetch(`${window.FRAME_API}/config`, {
@@ -195,7 +209,7 @@ async function savePalette(extra) {
 }

 document.getElementById('palette-save').addEventListener('click', () => {
-  savePalette({
+  savePalette('palette', 'palette', {
    color_boost: document.getElementById('color_boost').value,
    contrast_boost: document.getElementById('contrast_boost').value,
    dither_strength: document.getElementById('dither_strength').value,
@@ -203,16 +217,65 @@ document.getElementById('palette-save').addEventListener('click', () => {
 });

 document.getElementById('palette-reset').addEventListener('click', () => {
-  const inputs = paletteHexInputs();
+  const inputs = paletteHexInputs('palette');
  window.DEFAULT_PALETTE_HEX.forEach((hex, i) => {
    inputs[i].value = hex;
-    syncPaletteFromHex(i);
+    syncPaletteFromHex('palette', i);
  });
  ['color_boost', 'contrast_boost', 'dither_strength'].forEach((id) => {
    document.getElementById(id).value = '1';
    document.getElementById(`${id}_value`).textContent = '1.00';
  });
-  savePalette({ palette_reset: 'true', color_boost: '1', contrast_boost: '1', dither_strength: '1' });
+  savePalette('palette', 'palette', { palette_reset: 'true', color_boost: '1', contrast_boost: '1', dither_strength: '1' });
+});
+
+// Fills the table with a community-measured starting point (see the
+// card's own explanatory text) -- doesn't save by itself, same as
+// editing the hex/RGB fields by hand; the user still clicks Save (or
+// Reset) to commit or discard it.
+document.getElementById('palette-load-calibrated').addEventListener('click', () => {
+  const inputs = paletteHexInputs('palette');
+  window.CALIBRATED_SPECTRA6_HEX.forEach((hex, i) => {
+    inputs[i].value = hex;
+    syncPaletteFromHex('palette', i);
+  });
+});
+
+// ---- Photos configuration: its own separate palette/dithering ----
+
+document.getElementById('photo-palette-save').addEventListener('click', () => {
+  savePalette('photo-palette', 'photo_palette', {
+    photo_dither_strength: document.getElementById('photo_dither_strength').value,
+  });
+});
+
+document.getElementById('photo-palette-reset').addEventListener('click', () => {
+  const inputs = paletteHexInputs('photo-palette');
+  window.DEFAULT_PALETTE_HEX.forEach((hex, i) => {
+    inputs[i].value = hex;
+    syncPaletteFromHex('photo-palette', i);
+  });
+  document.getElementById('photo_dither_strength').value = '1';
+  document.getElementById('photo_dither_strength_value').textContent = '1.00';
+  savePalette('photo-palette', 'photo_palette', { photo_palette_reset: 'true', photo_dither_strength: '1' });
+});
+
+// ---- Theme ----
+
+document.getElementById('theme-save').addEventListener('click', async () => {
+  const body = new URLSearchParams({ theme: document.getElementById('theme-select').value });
+  try {
+    const resp = await fetch(`${window.FRAME_API}/config`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body,
+    });
+    if (!resp.ok) throw new Error(await apiError(resp));
+    showStatus(true, 'Saved.');
+    loadPreview();
+  } catch (e) {
+    showStatus(false, e.message);
+  }
 });

 // ---- Preview: current photo vs. how it renders with saved settings ----
@@ -339,8 +402,15 @@ async function loadFirmwareCheck(force) {
      statusEl.textContent = 'Waiting for the frame to check in before it can look up the right build.';
      btn.style.display = 'none';
    } else if (data.update_available) {
-      statusEl.textContent = `Update available: v${data.latest_version}.`;
+      statusEl.textContent = `Update available: v${data.latest_version}` +
+        (data.running_version ? ` (currently running v${data.running_version}).` : '.');
      btn.style.display = 'inline-block';
+    } else if (data.latest_version && data.running_version && data.running_version !== data.latest_version) {
+      // Already staged (or auto-applied) but the frame hasn't woken up
+      // and picked it up yet -- not "up to date" until it actually has.
+      statusEl.textContent = `v${data.latest_version} staged -- applies next time the frame wakes ` +
+        `(currently running v${data.running_version}).`;
+      btn.style.display = 'none';
    } else if (data.latest_version) {
      statusEl.textContent = `Up to date (v${data.latest_version}).`;
      btn.style.display = 'none';
@@ -58,48 +58,31 @@
  });
 })();

-// Live "how it's displaying" thumbnail. A real composite render (same
-// pipeline /frame/image uses), not a cached snapshot, so it's on a slow
-// poll rather than something tighter like the 10s device-status poll --
-// no need to hit Immich/calendar/whiteboard sources that often just for
-// a header thumbnail. Click enlarges it in a dialog (which also fetches
-// a fresh render); clicking the enlarged image refreshes it again.
+// Now-displaying / up-next header preview pair. "Up next" is a real
+// composite render (same pipeline /frame/image uses), not a cached
+// snapshot, so it's on a slow poll rather than something tighter like
+// the 10s device-status poll -- no need to hit Immich/calendar/
+// whiteboard sources that often just for a header thumbnail, and it
+// shows layout edits live as they're made. "Now displaying" is the
+// opposite: exactly the bytes last actually sent to the device (see
+// routers/device.py's _record_last_displayed), frozen until the
+// device's next real wake even while the layout is being edited live --
+// that contrast is the point of showing both side by side.
 (function () {
-  var thumb = document.getElementById('frame-preview-thumb');
-  var dialog = document.getElementById('frame-preview-dialog');
-  var bigImg = document.getElementById('frame-preview-dialog-img');
-  var closeBtn = document.getElementById('frame-preview-dialog-close');
-  if (!thumb || !window.FRAME_BASE_API) return;
+  var nextThumb = document.getElementById('frame-preview-thumb');
+  var nextDialog = document.getElementById('frame-preview-dialog');
+  var nextBigImg = document.getElementById('frame-preview-dialog-img');
+  var nextCloseBtn = document.getElementById('frame-preview-dialog-close');
+  var nowThumb = document.getElementById('frame-preview-now-thumb');
+  var nowDialog = document.getElementById('frame-preview-now-dialog');
+  var nowBigImg = document.getElementById('frame-preview-now-dialog-img');
+  var nowCloseBtn = document.getElementById('frame-preview-now-dialog-close');
+  if (!nextThumb || !window.FRAME_BASE_API) return;

-  function previewUrl() {
-    return `${window.FRAME_BASE_API}/preview?t=${Date.now()}`;
-  }
-  function refreshThumb() {
-    thumb.src = previewUrl();
-  }
-  // Opening the dialog (or clicking the big image inside it) fetches a
-  // fresh render and keeps the header thumb in sync, so this single path
-  // covers both "enlarge" and the old click-to-refresh behavior.
-  function refreshBig() {
-    var url = previewUrl();
-    bigImg.src = url;
-    thumb.src = url;
-  }
-
-  thumb.addEventListener('click', function () {
-    if (!dialog) { refreshThumb(); return; }
-    refreshBig();
-    dialog.showModal();
-  });
-  refreshThumb();
-  setInterval(refreshThumb, 60000);
-
-  if (dialog && bigImg && closeBtn) {
-    bigImg.addEventListener('click', refreshBig);
-    closeBtn.addEventListener('click', function () { dialog.close(); });
-    // Same backdrop-click-to-close trick as #widget-dialog: a click that
-    // lands on the dialog element itself (not its content box) means the
-    // backdrop was hit.
+  // Same backdrop-click-to-close trick as #widget-dialog: a click that
+  // lands on the dialog element itself (not its content box) means the
+  // backdrop was hit.
+  function closeOnBackdropClick(dialog) {
    dialog.addEventListener('click', function (e) {
      if (e.target !== dialog) return;
      var rect = dialog.getBoundingClientRect();
@@ -107,4 +90,80 @@
      if (!inside) dialog.close();
    });
  }
+
+  function nextUrl() {
+    return `${window.FRAME_BASE_API}/preview?t=${Date.now()}`;
+  }
+  function refreshNext() {
+    nextThumb.src = nextUrl();
+  }
+  // Opening the dialog (or clicking the big image inside it) fetches a
+  // fresh render and keeps the header thumb in sync, so this single path
+  // covers both "enlarge" and the old click-to-refresh behavior.
+  function refreshNextBig() {
+    var url = nextUrl();
+    nextBigImg.src = url;
+    nextThumb.src = url;
+  }
+
+  nextThumb.addEventListener('click', function () {
+    if (!nextDialog) { refreshNext(); return; }
+    refreshNextBig();
+    nextDialog.showModal();
+  });
+  refreshNext();
+  setInterval(refreshNext, 60000);
+
+  if (nextDialog && nextBigImg && nextCloseBtn) {
+    nextBigImg.addEventListener('click', refreshNextBig);
+    nextCloseBtn.addEventListener('click', function () { nextDialog.close(); });
+    closeOnBackdropClick(nextDialog);
+  }
+
+  // "Now displaying" fetches rather than sets .src directly: it needs to
+  // tell a 404 (device hasn't fetched yet) apart from a real image to
+  // show its own empty state instead of a broken-image icon, and reads
+  // the capture time off X-Displayed-At for the "N ago" tooltip.
+  if (nowThumb) {
+    var nowObjectUrl = null;
+    function refreshNow() {
+      fetch(`${window.FRAME_BASE_API}/now-displaying?t=${Date.now()}`)
+        .then(function (resp) {
+          if (!resp.ok) {
+            nowThumb.classList.add('frame-preview-thumb-empty');
+            nowThumb.removeAttribute('src');
+            nowThumb.title = "Now displaying -- hasn't shown anything yet";
+            return null;
+          }
+          var displayedAt = resp.headers.get('X-Displayed-At');
+          nowThumb.title = displayedAt
+            ? `Now displaying -- ${formatDuration(Math.max(0, Date.now() / 1000 - parseFloat(displayedAt)))} ago -- click to enlarge`
+            : 'Now displaying -- click to enlarge';
+          return resp.blob();
+        })
+        .then(function (blob) {
+          if (!blob) return;
+          nowThumb.classList.remove('frame-preview-thumb-empty');
+          var url = URL.createObjectURL(blob);
+          var old = nowObjectUrl;
+          nowObjectUrl = url;
+          nowThumb.src = url;
+          if (old) URL.revokeObjectURL(old);
+        })
+        .catch(function () { /* transient failure -- leave the last-known thumb showing */ });
+    }
+
+    nowThumb.addEventListener('click', function () {
+      if (nowThumb.classList.contains('frame-preview-thumb-empty') || !nowDialog) return;
+      nowBigImg.src = nowThumb.src;
+      nowDialog.showModal();
+    });
+    refreshNow();
+    setInterval(refreshNow, 60000);
+
+    if (nowDialog && nowCloseBtn) {
+      nowCloseBtn.addEventListener('click', function () { nowDialog.close(); });
+      closeOnBackdropClick(nowDialog);
+    }
+  }
 })();
@@ -0,0 +1,14 @@
+{
+  "name": "ESPresso Frame",
+  "short_name": "ESPresso",
+  "description": "Manage your e-ink photo frames.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#f5f6f8",
+  "theme_color": "#2563eb",
+  "icons": [
+    { "src": "/static/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/static/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}
@@ -0,0 +1,8 @@
+// Presence-only service worker: satisfies the "installable" requirement
+// (Chrome/Android in particular checks for a controlling SW with a fetch
+// handler) without adding an offline cache -- every request just goes to
+// the network as normal. Served from / (see app/main.py's /sw.js route)
+// so its scope covers the whole app, not just /static/.
+self.addEventListener("install", () => self.skipWaiting());
+self.addEventListener("activate", (event) => event.waitUntil(self.clients.claim()));
+self.addEventListener("fetch", (event) => event.respondWith(fetch(event.request)));
@@ -156,6 +156,24 @@ button.linklike:hover { color: var(--text); background: none; }
 .admin-inline-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
 .admin-inline-form input[type="text"] { margin-top: 0; flex: 1; }

+.log-view-controls { display: flex; gap: 10px; align-items: center; margin: 10px 0; font-size: 13px; }
+.log-view-controls a:not(.btn-inline) { color: var(--text-muted); }
+.log-view-controls a.active { color: var(--accent); font-weight: 600; }
+.log-view {
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+  max-height: 65vh;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--text);
+}
+
 h2.card-title, summary.card-title {
  font-size: 14.5px;
  font-weight: 650;
@@ -243,6 +261,36 @@ input[type="range"] {
 }
 .card + .card { margin-top: 20px; }

+/* Installed as a standalone app, the boxed-card look reads as "still a
+   website" -- flatten page-level cards into the page background so it
+   feels native. Cards inside the widget dialog keep their box: they're
+   grouping subsections of one form, not top-level page furniture. */
+@media (display-mode: standalone) {
+  .card {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 20px 0;
+  }
+  .card + .card {
+    margin-top: 4px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border);
+  }
+  #widget-dialog-body .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 20px 22px 22px;
+  }
+  #widget-dialog-body .card + .card {
+    margin-top: 20px;
+    padding-top: 22px;
+    border-top: none;
+  }
+}
+
 label { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text); }
 label:first-child { margin-top: 0; }

@@ -719,13 +767,24 @@ code {
 }
 .frame-name-edit button { margin-top: 0; }

+.frame-preview-pair {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 12px;
+  vertical-align: middle;
+}
+.frame-preview-arrow {
+  color: var(--text-muted);
+  font-size: 16px;
+  line-height: 1;
+}
 .frame-preview-thumb {
  height: 44px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  vertical-align: middle;
-  margin-left: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt);
@@ -733,6 +792,13 @@ code {
  transition: opacity .12s ease;
 }
 .frame-preview-thumb:hover { opacity: 0.8; }
+.frame-preview-thumb-empty {
+  opacity: 0.3;
+  cursor: default;
+  width: 60px;
+  font-size: 0; /* no src yet -- suppresses the browser's fallback alt-text render */
+}
+.frame-preview-thumb-empty:hover { opacity: 0.3; }

 .frame-preview-dialog {
  position: fixed;
@@ -13,6 +13,7 @@ function initBatteryDialog() {
    e.preventDefault();
    const body = new URLSearchParams({
      battery_mode: document.getElementById('battery_mode').value,
+      battery_render_style: document.getElementById('battery_render_style').value,
    });
    try {
      const resp = await fetch(`${window.FRAME_API}/config`, {
@@ -81,6 +81,7 @@ function initCalendarDialog() {
      calendar_week_days: document.getElementById('calendar_week_days').value,
      calendar_week_layout: document.getElementById('calendar_week_layout').value,
      calendar_week_start_offset: document.getElementById('calendar_week_start_offset').value,
+      calendar_render_style: document.getElementById('calendar_render_style').value,
    });
    try {
      const resp = await fetch(`${window.FRAME_API}/config`, {
@@ -198,6 +199,7 @@ function initCalendarDialog() {
  document.getElementById('calendar-preview-refresh').addEventListener('click', loadCalendarPreview);
  loadCalendarPreview();
  initBorderFields();
+  initFontScaleFields();
  initButtonActionFields();
 }

@@ -0,0 +1,32 @@
+// Shared "Text size" card (models.Widget.font_scale,
+// _widget_font_scale_fields.html) -- only present on the calendar/tasks
+// dialogs (see frame_pages.py's widget_dialog), same "one shared init
+// function" shape as initBorderFields, just not included on every
+// dialog since it isn't relevant to every widget type.
+
+function initFontScaleFields() {
+  const select = document.getElementById('widget_font_scale');
+  if (!select) return; // dialog fragment didn't render the font-scale card -- shouldn't happen
+
+  document.getElementById('font-scale-config-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+      const resp = await fetch(`${window.FRAME_API}/font-scale`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ font_scale: Number(select.value) }),
+      });
+      if (!resp.ok) throw new Error(await apiError(resp));
+      showStatus(true, 'Text size saved.');
+      // Whichever dialog is actually open -- both loadCalendarPreview and
+      // loadTasksPreview are always defined (plain script tags, not
+      // module-scoped), so checking the function's existence isn't
+      // enough; check for the <img> it actually targets instead (calling
+      // the wrong one throws setting .src on a null element).
+      if (document.getElementById('calendar-preview')) loadCalendarPreview();
+      if (document.getElementById('tasks-preview')) loadTasksPreview();
+    } catch (err) {
+      showStatus(false, err.message);
+    }
+  });
+}
@@ -38,6 +38,7 @@ function initStaticDialog() {
    e.preventDefault();
    const body = new URLSearchParams({
      display_mode: document.getElementById('display_mode').value,
+      static_render_style: document.getElementById('static_render_style').value,
    });
    try {
      const resp = await fetch(`${window.FRAME_API}/config`, {
@@ -71,6 +71,7 @@ function initTasksDialog() {
    const body = new URLSearchParams({
      tasks_name: document.getElementById('tasks_name').value,
      tasks_show_completed: String(document.getElementById('tasks_show_completed').checked),
+      tasks_render_style: document.getElementById('tasks_render_style').value,
    });
    try {
      const resp = await fetch(`${window.FRAME_API}/config`, {
@@ -89,6 +90,7 @@ function initTasksDialog() {
  document.getElementById('tasks-preview-refresh').addEventListener('click', loadTasksPreview);
  loadTasksPreview();
  initBorderFields();
+  initFontScaleFields();
  initButtonActionFields();
 }

@@ -113,6 +113,7 @@ function initTextDialog() {
      text_font_size: document.getElementById('text_font_size').value,
      text_align: document.getElementById('text_align').value,
      text_background_color: document.getElementById('text_background_color').value,
+      text_render_style: document.getElementById('text_render_style').value,
    });
    try {
      const resp = await fetch(`${window.FRAME_API}/config`, {
@@ -14,6 +14,12 @@ function updateWeatherFieldVisibility() {
  document.getElementById('weather-daily-days-row').style.display = mode === 'daily' ? '' : 'none';
  document.getElementById('weather-location-section').style.display = mode === 'multi_city' ? 'none' : '';
  document.getElementById('weather-cities-section').style.display = mode === 'multi_city' ? '' : 'none';
+  // Modern style is only built for current/daily (see app/html_render.py) --
+  // hourly/multi_city always render classic server-side regardless of this
+  // setting, so hide the row entirely rather than offer a choice that's a
+  // silent no-op.
+  document.getElementById('weather-render-style-row').style.display =
+    (mode === 'current' || mode === 'daily') ? '' : 'none';
 }

 function addWeatherWidgetCityRow(label) {
@@ -74,6 +80,7 @@ function initWeatherDialog() {
      weather_units: document.getElementById('weather_units').value,
      weather_hourly_interval_hours: document.getElementById('weather_hourly_interval_hours').value,
      weather_daily_days: document.getElementById('weather_daily_days').value,
+      weather_render_style: document.getElementById('weather_render_style').value,
    });
    try {
      const resp = await fetch(`${window.FRAME_API}/config`, {
@@ -90,6 +90,25 @@ function initWhiteboardDialog() {
    whiteboardClearBtn.addEventListener('click', clearWhiteboardSource);
  }

+  document.getElementById('whiteboard-config-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const body = new URLSearchParams({
+      whiteboard_render_style: document.getElementById('whiteboard_render_style').value,
+    });
+    try {
+      const resp = await fetch(`${window.FRAME_API}/config`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body,
+      });
+      if (!resp.ok) throw new Error(await apiError(resp));
+      showStatus(true, 'Saved.');
+      loadWhiteboardPreview(false);
+    } catch (e) {
+      showStatus(false, e.message);
+    }
+  });
+
  // Shows whatever's already cached (cheap, no refetch) on open; the
  // button is the one place that means "no really, go check now" --
  // bypasses the fetch throttle server-side (see api_widget_preview_
@@ -0,0 +1,4 @@
+<nav class="tabs">
+  <a href="/admin" class="{% if active_admin_tab == 'main' %}active{% endif %}">Users &amp; Frames</a>
+  <a href="/admin/logs" class="{% if active_admin_tab == 'logs' %}active{% endif %}">Server Logs</a>
+</nav>
@@ -7,10 +7,19 @@
  <button type="button" class="btn-inline" id="frame-name-save">Save</button>
  <button type="button" class="btn-inline secondary" id="frame-name-cancel">Cancel</button>
 </span>
-<img id="frame-preview-thumb" class="frame-preview-thumb" alt="Live preview of what the frame is displaying" title="What the frame is currently displaying -- click to enlarge">
+<span class="frame-preview-pair">
+  <img id="frame-preview-now-thumb" class="frame-preview-thumb frame-preview-thumb-empty" alt="What the frame is currently displaying" title="Now displaying">
+  <span class="frame-preview-arrow" aria-hidden="true">&rarr;</span>
+  <img id="frame-preview-thumb" class="frame-preview-thumb" alt="Live preview of what the frame will show next" title="Up next -- live preview, updates as you edit the layout -- click to enlarge">
+</span>
+
+<dialog id="frame-preview-now-dialog" class="frame-preview-dialog">
+  <button type="button" id="frame-preview-now-dialog-close" class="icon-btn" aria-label="Close" title="Close">&times;</button>
+  <img id="frame-preview-now-dialog-img" alt="What the frame is currently displaying">
+</dialog>

 <dialog id="frame-preview-dialog" class="frame-preview-dialog">
  <button type="button" id="frame-preview-dialog-close" class="icon-btn" aria-label="Close" title="Close">&times;</button>
-  <img id="frame-preview-dialog-img" alt="Live preview of what the frame is displaying" title="Click to refresh">
+  <img id="frame-preview-dialog-img" alt="Live preview of what the frame will show next" title="Click to refresh">
 </dialog>

@@ -11,6 +11,12 @@
        <option value="detailed" {% if not battery_cfg or battery_cfg.mode == 'detailed' %}selected{% endif %}>Detailed (+ estimated time left, last report)</option>
      </select>
    </label>
+    <label>Render style
+      <select id="battery_render_style">
+        <option value="classic" {% if not battery_cfg or battery_cfg.render_style == 'classic' %}selected{% endif %}>Classic (hand-drawn icon)</option>
+        <option value="modern" {% if battery_cfg and battery_cfg.render_style == 'modern' %}selected{% endif %}>Modern (experimental)</option>
+      </select>
+    </label>
    <button type="submit">Save</button>
  </form>
 </section>
@@ -40,6 +40,12 @@
      <p class="sub" style="margin-top: 4px;">0 = starts today, negative = starts in the
        past, positive = starts in the future. Only used when Days to show isn't 7.</p>
    </div>
+    <label>Render style
+      <select id="calendar_render_style">
+        <option value="classic" {% if calendar_cfg.render_style == 'classic' %}selected{% endif %}>Classic (hand-drawn)</option>
+        <option value="modern" {% if calendar_cfg.render_style == 'modern' %}selected{% endif %}>Modern (experimental, all views)</option>
+      </select>
+    </label>
    <button type="submit">Save</button>
  </form>

@@ -129,6 +135,8 @@

 {% include "_widget_border_fields.html" %}

+{% include "_widget_font_scale_fields.html" %}
+
 {% include "_widget_button_fields.html" %}

 <section class="card" style="margin-top: 20px;">
@@ -32,6 +32,12 @@
      exactly without cropping (an image with a different aspect ratio
      looks stretched); <strong>Shrink to fit</strong> shows the whole
      image, letterboxed if needed.</p>
+    <label>Render style
+      <select id="static_render_style">
+        <option value="classic" {% if not static_cfg or static_cfg.render_style == 'classic' %}selected{% endif %}>Classic (no frame)</option>
+        <option value="modern" {% if static_cfg and static_cfg.render_style == 'modern' %}selected{% endif %}>Modern (rounded-corner card, experimental)</option>
+      </select>
+    </label>
    <button type="submit">Save</button>
  </form>
 </section>
@@ -55,12 +55,20 @@
      <input type="checkbox" id="tasks_show_completed" {% if task_cfg.show_completed %}checked{% endif %}>
      <label for="tasks_show_completed">Also show tasks completed in the last 24 hours</label>
    </div>
+    <label>Render style
+      <select id="tasks_render_style">
+        <option value="classic" {% if task_cfg.render_style == 'classic' %}selected{% endif %}>Classic (hand-drawn checklist)</option>
+        <option value="modern" {% if task_cfg.render_style == 'modern' %}selected{% endif %}>Modern (experimental)</option>
+      </select>
+    </label>
    <button type="submit">Save</button>
  </form>
 </section>

 {% include "_widget_border_fields.html" %}

+{% include "_widget_font_scale_fields.html" %}
+
 {% include "_widget_button_fields.html" %}

 <section class="card" style="margin-top: 20px;">
@@ -43,6 +43,12 @@
    <label>Background color
      <input type="color" id="text_background_color" value="{{ text_cfg.background_color if text_cfg else '#ffffff' }}">
    </label>
+    <label>Render style
+      <select id="text_render_style">
+        <option value="classic" {% if not text_cfg or text_cfg.render_style == 'classic' %}selected{% endif %}>Classic (hand-drawn text)</option>
+        <option value="modern" {% if text_cfg and text_cfg.render_style == 'modern' %}selected{% endif %}>Modern (experimental)</option>
+      </select>
+    </label>
    <button type="submit">Save</button>
  </form>
 </section>
@@ -11,6 +11,14 @@
        <option value="multi_city" {% if weather_cfg.mode == "multi_city" %}selected{% endif %}>Multiple cities</option>
      </select>
    </label>
+    <div id="weather-render-style-row">
+      <label>Render style
+        <select id="weather_render_style">
+          <option value="classic" {% if weather_cfg.render_style == "classic" %}selected{% endif %}>Classic (hand-drawn icons)</option>
+          <option value="modern" {% if weather_cfg.render_style == "modern" %}selected{% endif %}>Modern (experimental, current/daily only)</option>
+        </select>
+      </label>
+    </div>
    <label>Weather source
      <select id="weather_provider">
        {% for value, label in weather_provider_labels.items() %}
@@ -50,6 +50,19 @@
  {% endif %}
 </section>

+<section class="card" style="margin-top: 20px;">
+  <h2 class="card-title">Settings</h2>
+  <form id="whiteboard-config-form">
+    <label>Render style
+      <select id="whiteboard_render_style">
+        <option value="classic" {% if not whiteboard_cfg or whiteboard_cfg.render_style == 'classic' %}selected{% endif %}>Classic (no frame)</option>
+        <option value="modern" {% if whiteboard_cfg and whiteboard_cfg.render_style == 'modern' %}selected{% endif %}>Modern (rounded-corner card, experimental)</option>
+      </select>
+    </label>
+    <button type="submit">Save</button>
+  </form>
+</section>
+
 {% include "_widget_border_fields.html" %}

 {% include "_widget_button_fields.html" %}
@@ -0,0 +1,15 @@
+<section class="card" style="margin-top: 20px;">
+  <h2 class="card-title">Text size</h2>
+  <p class="sub">Scales this widget's own text up for easier reading on
+    the panel -- rows/columns re-fit around the bigger text automatically.</p>
+  <form id="font-scale-config-form">
+    <label>Size
+      <select id="widget_font_scale">
+        {% for value, label in font_scale_choices %}
+          <option value="{{ value }}" {% if widget.font_scale == value %}selected{% endif %}>{{ label }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <button type="submit">Save</button>
+  </form>
+</section>
@@ -4,6 +4,8 @@
 {% block page_title %}Administration{% endblock %}

 {% block content %}
+  {% include "_admin_tabs.html" %}
+
  {% if notice %}<div class="status ok">{{ notice }}</div>{% endif %}
  {% if error %}<div class="status err">{{ error }}</div>{% endif %}

@@ -106,21 +108,14 @@
              owner: {{ (f.owner.username if f.owner else none) or "UNCLAIMED" }}
              &middot; linked: {{ links_by_frame.get(f.id, []) | map(attribute="username") | join(", ") or "nobody" }}<br>
              firmware: {{ f.device_firmware_version or "?" }} ({{ f.device_board_variant or "board unknown" }})
+              &middot; panel: {{ panel_labels.get(f.panel_type, f.panel_type) }}
              &middot; token ack: {{ "yes" if f.device_token_ack else "no" }}
-              {% if f.legacy_token_enabled %}&middot; <strong>legacy token window OPEN</strong>{% endif %}
            </p>
            <form method="post" action="/admin/frames/{{ f.id }}/link-user" class="admin-inline-form">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
              <input type="text" name="username" placeholder="Link user by name" required>
              <button type="submit" class="secondary btn-inline">Link</button>
            </form>
-            {% if f.legacy_token_enabled %}
-              <form method="post" action="/admin/frames/{{ f.id }}/end-legacy" class="admin-inline-form"
-                    onsubmit="return confirm('Close the legacy-token window for frame #{{ f.id }}? Only do this once the device has acknowledged its own token.');">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-                <button type="submit" class="secondary btn-inline">Close legacy window</button>
-              </form>
-            {% endif %}
            <form method="post" action="/admin/frames/{{ f.id }}/delete" class="admin-inline-form"
                  onsubmit="return confirm('Delete frame #{{ f.id }} and all its history?');">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
@@ -0,0 +1,30 @@
+{% extends "app_base.html" %}
+
+{% block title %}Server Logs{% endblock %}
+{% block page_title %}Administration{% endblock %}
+
+{% block content %}
+  {% include "_admin_tabs.html" %}
+
+  <section class="card">
+    <div class="card-title-row">
+      <h2 class="card-title">Server Logs</h2>
+      <a href="/admin/logs/download" class="secondary btn-inline">Download full log</a>
+    </div>
+
+    {% if not log_exists %}
+      <p class="sub">No log file yet -- nothing has been logged since this server last started.</p>
+    {% else %}
+      <p class="sub">Last {{ log_lines }} lines of <code>{{ log_path }}</code>. Rotates at ~2MB
+        (older entries roll into <code>{{ log_path }}.1</code>, etc. -- not shown here; use
+        "Download full log" for just the current file).</p>
+      <div class="log-view-controls">
+        {% for n in [200, 500, 2000, 5000] %}
+          <a href="/admin/logs?lines={{ n }}" class="{% if log_lines == n %}active{% endif %}">{{ n }}</a>
+        {% endfor %}
+        <a href="/admin/logs?lines={{ log_lines }}" class="secondary btn-inline">Refresh</a>
+      </div>
+      <pre class="log-view">{{ log_text }}</pre>
+    {% endif %}
+  </section>
+{% endblock %}
@@ -17,6 +17,14 @@
    })();
  </script>
  <link rel="stylesheet" href="/static/theme.css">
+  <link rel="manifest" href="/static/manifest.json">
+  <link rel="icon" href="/static/icons/favicon.png">
+  <link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">
+  <meta name="theme-color" content="#2563eb">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="ESPresso">
  {% block extra_head %}{% endblock %}
 </head>
 <body>
@@ -17,6 +17,14 @@
    })();
  </script>
  <link rel="stylesheet" href="/static/theme.css">
+  <link rel="manifest" href="/static/manifest.json">
+  <link rel="icon" href="/static/icons/favicon.png">
+  <link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">
+  <meta name="theme-color" content="#2563eb">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="ESPresso">
  {% block extra_head %}{% endblock %}
 </head>
 <body>
@@ -95,6 +95,10 @@
          {% if frame.device_board_variant %}Detected board: {{ frame.device_board_variant }}
          {% else %}Board not detected yet -- the frame reports it on its next check-in.{% endif %}
        </p>
+        <p class="sub" id="firmware-panel">
+          {% if frame.device_board_variant %}Panel: {{ panel_labels.get(frame.panel_type, frame.panel_type) }}
+          {% else %}Panel not detected yet -- determined automatically from the frame's board.{% endif %}
+        </p>
        <p class="sub" id="firmware-available">
          {% if frame.firmware_available_version %}Uploaded: v{{ frame.firmware_available_version }} -- the frame
          updates itself on its next wake if it's running something else.{% else %}No firmware uploaded yet.{% endif %}
@@ -139,11 +143,12 @@

      <details class="card">
        <summary class="card-title">Advanced configuration</summary>
-        <p class="sub">Color-quantization values used when dithering photos
-          for this panel -- approximations by default, since exact primaries
-          aren't published. Tune them by comparing a rendered photo against
-          the physical panel; different panel units can vary enough to be
-          worth calibrating per frame.</p>
+        <p class="sub">Color-quantization values used for every widget
+          <strong>except photos</strong> (which has its own separate
+          settings below) -- approximations by default, since exact
+          primaries aren't published. Tune them by comparing a rendered
+          widget against the physical panel; different panel units can
+          vary enough to be worth calibrating per frame.</p>
        <div class="palette-table-wrap">
          <table class="palette-table">
            <thead><tr><th></th><th>Color</th><th>Hex</th><th>R</th><th>G</th><th>B</th></tr></thead>
@@ -187,6 +192,68 @@

        <button type="button" class="secondary" id="palette-save" style="margin-top: 16px;">Save</button>
        <button type="button" class="secondary" id="palette-reset">Reset to defaults</button>
+        <button type="button" class="secondary" id="palette-load-calibrated">Load calibrated Spectra 6 preset</button>
+        <p class="sub" style="margin-top: 8px;">Experimental: a community-measured
+          starting point (not this specific panel) -- fills the table above,
+          doesn't save by itself. Real Spectra 6 ink is duller than the
+          idealized defaults; this may or may not match your actual unit.
+          Compare against the physical panel before keeping it.</p>
+      </details>
+
+      <details class="card">
+        <summary class="card-title">Theme</summary>
+        <p class="sub">A curated visual style for widgets using the
+          "modern" (experimental) render style -- font, corner radius,
+          shadow, and header accent. Widgets rendered in the classic
+          style are unaffected. Photos are unaffected too (see Photos
+          configuration below).</p>
+        <label>Theme
+          <select id="theme-select">
+            {% for key, t in themes.items() %}
+              <option value="{{ key }}" {% if frame.theme == key %}selected{% endif %}>{{ t.label }}</option>
+            {% endfor %}
+          </select>
+        </label>
+        <button type="button" class="secondary" id="theme-save" style="margin-top: 16px;">Save</button>
+      </details>
+
+      <details class="card">
+        <summary class="card-title">Photos configuration</summary>
+        <p class="sub">Palette and dithering used <strong>only</strong> by
+          the photos widget, independent of Advanced configuration above --
+          lets you tune the rest of this frame's widgets (e.g. a "modern"
+          HTML-rendered look) without changing what looks best for actual
+          photographs, or vice versa.</p>
+        <div class="palette-table-wrap">
+          <table class="palette-table">
+            <thead><tr><th></th><th>Color</th><th>Hex</th><th>R</th><th>G</th><th>B</th></tr></thead>
+            <tbody>
+              {% set current_photo_palette = frame.photo_palette_rgb or default_palette_rgb %}
+              {% set current_photo_hex = palette_to_hex(current_photo_palette) %}
+              {% for label in palette_labels %}
+                <tr>
+                  <td><span class="photo-palette-swatch-preview" data-index="{{ loop.index0 }}"
+                            style="background: {{ current_photo_hex[loop.index0] }};"></span></td>
+                  <td>{{ label }}</td>
+                  <td><input type="text" class="photo-palette-hex" id="photo_palette_{{ loop.index0 }}" data-index="{{ loop.index0 }}"
+                             value="{{ current_photo_hex[loop.index0] }}" maxlength="7" pattern="#[0-9a-fA-F]{6}"
+                             spellcheck="false" autocomplete="off"></td>
+                  <td><input type="number" class="photo-palette-rgb photo-palette-r" data-index="{{ loop.index0 }}"
+                             min="0" max="255" value="{{ current_photo_palette[loop.index0][0] }}"></td>
+                  <td><input type="number" class="photo-palette-rgb photo-palette-g" data-index="{{ loop.index0 }}"
+                             min="0" max="255" value="{{ current_photo_palette[loop.index0][1] }}"></td>
+                  <td><input type="number" class="photo-palette-rgb photo-palette-b" data-index="{{ loop.index0 }}"
+                             min="0" max="255" value="{{ current_photo_palette[loop.index0][2] }}"></td>
+                </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        <label>Dithering strength <span class="slider-value" id="photo_dither_strength_value">{{ "%.2f" | format(frame.photo_dither_strength) }}</span>
+          <input type="range" id="photo_dither_strength" min="0" max="1" step="0.05" value="{{ frame.photo_dither_strength }}">
+        </label>
+        <button type="button" class="secondary" id="photo-palette-save" style="margin-top: 16px;">Save</button>
+        <button type="button" class="secondary" id="photo-palette-reset">Reset to defaults</button>
      </details>

      <section class="card">
@@ -221,6 +288,7 @@
  <script>
    window.FRAME_BASE_API = window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};
    window.DEFAULT_PALETTE_HEX = {{ palette_to_hex(default_palette_rgb) | tojson }};
+    window.CALIBRATED_SPECTRA6_HEX = {{ calibrated_spectra6_hex | tojson }};
    window.PHOTO_WIDGET_PREVIEW_API = {{ (("/api/frames/" ~ frame.id ~ "/widgets/" ~ photo_widget_id) | tojson) if photo_widget_id else "null" }};
  </script>
  <script src="/static/device_status_bar.js"></script>
@@ -77,6 +77,7 @@
  <script src="/static/widget_dialog_weather.js"></script>
  <script src="/static/widget_dialog_battery.js"></script>
  <script src="/static/widget_dialog_border.js"></script>
+  <script src="/static/widget_dialog_font_scale.js"></script>
  <script src="/static/widget_dialog_button_actions.js"></script>
  <script src="/static/frame_layout.js"></script>
  <script src="/static/saved_layouts.js"></script>
@@ -0,0 +1,39 @@
+{% macro day_section(header, weather_entries, weather_size, unit_suffix, rows, more_count, row_h, body_size, title_size, accent_start, header_h, accent_h) %}
+  <div class="day-section">
+    {#- Fixed height (not auto) -- every stacked day-section's header
+        must be exactly this tall regardless of whether THIS particular
+        day has a weather entry, or days with/without weather misalign
+        where their event rows start (see calendar_week_horizontal's
+        identical fix/reasoning). Bold-minimal: a slim accent-colored
+        rule (not a full gradient band) carries the theme identity --
+        the header text itself is plain ink, dithered at the base
+        amplitude like everything else, not the richer accent amplitude
+        the old white-on-gradient text needed to stay legible. #}
+    <div class="day-header" style="height: {{ header_h }}px;">
+      <div class="accent-rule" style="height: {{ accent_h }}px; background: {{ accent_start }};"></div>
+      <div class="day-header-row">
+        <div class="day-header-title" style="font-size: {{ title_size }}px;">{{ header }}</div>
+        {% if weather_entries %}
+          <div class="day-weather-row" style="font-size: {{ weather_size }}px;">
+            {% for we in weather_entries %}
+              <div class="day-weather-entry"><span class="day-weather-icon" style="font-size: {{ weather_size * 1.3 }}px;">{{ we.emoji }}</span><span>{{ we.high }}&deg;/{{ we.low }}&deg;{{ unit_suffix }}</span></div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      </div>
+    </div>
+    <div class="day-rows">
+      {% if not rows and not more_count %}
+        <div class="day-empty" style="font-size: {{ body_size }}px;">Nothing scheduled</div>
+      {% endif %}
+      {% for row in rows %}
+        <div class="day-row" style="height: {{ row_h }}px;">
+          <div class="day-chip">{% for c in row.colors %}<span style="background:{{ c }};"></span>{% endfor %}</div>
+          <div class="day-time" style="font-size: {{ body_size }}px;">{{ row.time }}</div>
+          <div class="day-summary" style="font-size: {{ body_size }}px;">{{ row.summary }}</div>
+        </div>
+      {% endfor %}
+      {% if more_count %}<div class="day-more" style="font-size: {{ body_size }}px;">+{{ more_count }} more</div>{% endif %}
+    </div>
+  </div>
+{% endmacro %}
@@ -0,0 +1,46 @@
+<!doctype html>
+<html><head><style>
+  @font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
+  @font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
+  * { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
+  body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
+  .wrap {
+    width: {{ w }}px; height: {{ h }}px; padding: {{ pad }}px;
+    display: flex; flex-direction: column; justify-content: space-between;
+  }
+  .icon-wrap { display: flex; align-items: center; }
+  .icon-body {
+    width: {{ icon_w }}px;
+    height: {{ icon_h }}px;
+    border: {{ stroke }}px solid #000000;
+    border-radius: {{ icon_radius }}px;
+    padding: {{ stroke }}px;
+  }
+  .icon-fill {
+    width: {{ fill_pct }}%;
+    height: 100%;
+    border-radius: {{ fill_radius }}px;
+    background: linear-gradient(180deg, {{ fill_color }}, {{ fill_color_dark }});
+  }
+  .icon-nub {
+    width: {{ nub_w }}px;
+    height: {{ nub_h }}px;
+    background: #000000;
+    border-radius: 0 {{ nub_radius }}px {{ nub_radius }}px 0;
+  }
+  .pct { font-weight: 700; font-size: {{ pct_size }}px; line-height: 0.85; color: {{ fill_color }}; letter-spacing: -0.02em; }
+  .lines { margin-top: {{ line_gap }}px; }
+  .line { font-weight: 400; font-size: {{ line_size }}px; line-height: 1.3; color: #5b6674; }
+</style></head>
+<body>
+  <div class="wrap">
+    <div class="icon-wrap">
+      <div class="icon-body"><div class="icon-fill"></div></div>
+      <div class="icon-nub"></div>
+    </div>
+    <div>
+      <div class="pct">{{ percent }}%</div>
+      <div class="lines">{% for line in lines %}<div class="line">{{ line }}</div>{% endfor %}</div>
+    </div>
+  </div>
+</body></html>
@@ -0,0 +1,35 @@
+<!doctype html>
+<html><head><style>
+  @font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
+  @font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
+  * { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
+  body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
+  .wrap {
+    width: {{ w - gutter * 2 }}px;
+    height: {{ h - gutter * 2 }}px;
+    margin: {{ gutter }}px;
+    display: flex;
+    flex-direction: column;
+  }
+  .day-section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
+  .day-header { flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; }
+  .accent-rule { width: 100%; border-radius: 100px; }
+  .day-header-row { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; min-height: 0; }
+  .day-header-title { font-weight: 700; color: #17233b; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .day-weather-row { display: flex; gap: 14px; flex: 0 0 auto; }
+  .day-weather-entry { display: flex; align-items: center; gap: 4px; color: #5b6674; }
+  .day-weather-icon { line-height: 1; }
+  .day-rows { flex: 1 1 auto; padding: 8px 0; overflow: hidden; }
+  .day-row { display: flex; align-items: center; gap: 8px; }
+  .day-chip { display: flex; height: 12px; width: 10px; border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
+  .day-chip span { flex: 1 1 0; }
+  .day-time { color: #5b6674; flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
+  .day-summary { color: #17233b; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .day-empty, .day-more { color: #5b6674; padding-top: 4px; }
+</style></head>
+<body>
+  {% import "_calendar_day_section.html.jinja" as ds %}
+  <div class="wrap">
+    {{ ds.day_section(header, weather_entries, weather_size, unit_suffix, rows, more_count, row_h, body_size, title_size, accent_start, header_h, accent_h) }}
+  </div>
+</body></html>
@@ -0,0 +1,71 @@
+<!doctype html>
+<html><head><style>
+  @font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
+  @font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
+  * { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
+  body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
+  .wrap {
+    width: {{ w - gutter * 2 }}px;
+    height: {{ h - gutter * 2 }}px;
+    margin: {{ gutter }}px;
+    display: flex;
+    flex-direction: column;
+  }
+  .accent-rule { flex: 0 0 auto; width: 100%; height: {{ accent_h }}px; border-radius: 100px; background: {{ accent_start }}; }
+  .weekday-row { display: flex; flex: 0 0 auto; margin-top: 6px; }
+  .weekday-cell { flex: 1 1 0; color: #17233b; font-weight: 700; font-size: {{ header_size }}px; text-align: center; padding: 4px 0; }
+  .weeks { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 2px; }
+  .week-row { flex: 1 1 0; display: flex; }
+  {#- A real palette color (pure black), not a pale gray -- this panel's
+      6-color palette has no gray to dither toward, so #e2e6ec-style
+      "hairlines" don't survive at all (confirmed by sampling actual
+      rendered pixels: every one came back pure white). Horizontal
+      rules only, between week rows -- enough for the grid to scan
+      top-to-bottom without boxing every single day cell, which read
+      more like the old structured-dashboard mockup than bold-minimal. #}
+  .week-row + .week-row { border-top: 1px solid #000000; }
+  .day-cell { flex: 1 1 0; padding: 4px; min-width: 0; overflow: hidden; }
+  {#- Bold everywhere, including out-of-month -- de-emphasis is via
+      smaller size only, not weight or a gray color. Regular-weight and
+      gray text are both individually fragile under Bayer ordered
+      dithering at small sizes (thin/low-contrast anti-aliased edges
+      have little "mass" to survive the bias+threshold step), and this
+      cell combined both, which degraded out-of-month day numbers into
+      unrecognizable speckle -- classic PIL's own de-emphasis trick
+      (weight instead of gray, see calendar_render._build_month's
+      docstring) doesn't transfer safely to this render path. #}
+  .day-num { font-size: {{ day_size }}px; font-weight: 700; color: #17233b; }
+  .day-num.out-of-month { font-size: {{ day_size * 0.8 }}px; }
+  .day-num.today {
+    display: inline-block; background: {{ accent_start }}; color: #ffffff;
+    border-radius: 4px; padding: 0 4px;
+  }
+  .dots { display: flex; gap: 3px; margin-top: 3px; align-items: center; flex-wrap: wrap; }
+  .dot { width: {{ dot_size }}px; height: {{ dot_size }}px; border-radius: 50%; flex: 0 0 auto; }
+  .dot-more { font-size: {{ day_size * 0.8 }}px; color: #5b6674; }
+</style></head>
+<body>
+  <div class="wrap">
+    <div class="accent-rule"></div>
+    <div class="weekday-row">
+      {% for name in day_names %}<div class="weekday-cell">{{ name }}</div>{% endfor %}
+    </div>
+    <div class="weeks">
+      {% for week in weeks %}
+        <div class="week-row">
+          {% for day in week %}
+            <div class="day-cell">
+              <span class="day-num {% if day.is_today %}today{% elif not day.in_month %}out-of-month{% endif %}">{{ day.day_num }}</span>
+              {% if day.dots %}
+                <div class="dots">
+                  {% for c in day.dots %}<div class="dot" style="background:{{ c }};"></div>{% endfor %}
+                  {% if day.more_count %}<span class="dot-more">+{{ day.more_count }}</span>{% endif %}
+                </div>
+              {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</body></html>
@@ -0,0 +1,42 @@
+<!doctype html>
+<html><head><style>
+  @font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
+  @font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
+  * { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
+  body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
+  .wrap {
+    width: {{ w - gutter * 2 }}px;
+    height: {{ h - gutter * 2 }}px;
+    margin: {{ gutter }}px;
+    display: flex;
+    flex-direction: column;
+  }
+  .day-section { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; }
+  {#- No divider line -- #e2e6ec was invisible on this panel's 6-color
+      palette anyway (no gray to dither toward, confirmed by sampling
+      rendered pixels), and the accent rule + margin at the top of the
+      next section already reads as a clear boundary without one. #}
+  .day-section + .day-section { margin-top: 8px; }
+  .day-header { flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; }
+  .accent-rule { width: 100%; border-radius: 100px; }
+  .day-header-row { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; min-height: 0; }
+  .day-header-title { font-weight: 700; color: #17233b; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .day-weather-row { display: flex; gap: 12px; flex: 0 0 auto; }
+  .day-weather-entry { display: flex; align-items: center; gap: 4px; color: #5b6674; }
+  .day-weather-icon { line-height: 1; }
+  .day-rows { flex: 1 1 auto; padding: 4px 0; overflow: hidden; }
+  .day-row { display: flex; align-items: center; gap: 8px; }
+  .day-chip { display: flex; height: 12px; width: 10px; border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
+  .day-chip span { flex: 1 1 0; }
+  .day-time { color: #5b6674; flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
+  .day-summary { color: #17233b; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .day-empty, .day-more { color: #5b6674; padding-top: 2px; }
+</style></head>
+<body>
+  {% import "_calendar_day_section.html.jinja" as ds %}
+  <div class="wrap">
+    {% for day in days %}
+      {{ ds.day_section(day.header, day.weather_entries, weather_size, unit_suffix, day.rows, day.more_count, row_h, body_size, title_size, accent_start, header_h, accent_h) }}
+    {% endfor %}
+  </div>
+</body></html>
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .4.1
 .5.0