Show a live picture on a camera tile, run an action from the alert button, roll long media titles, and keep full-page tiles in their own colour (0.2.91)

Live picture (issue #4): a camera or image tile on a Guition takes
Display -> Live picture with a pace of 15 or 30 s. The camera tiles of a
page share one download: the screen asks ESP Screens for them together
(esphome.screen_camera with tiles, size and bg) and the app serves one
BMP, a strip of squares with the corners rounded over each tile's own
colour; every tile draws its square out of it with LVGL's image offset
(LV_IMAGE_ALIGN_TOP_LEFT: the default centres a taller source). A third
online_image on the Guition holds the strip; it loads after the alert's
picture, a cover and the camera full screen, never under a card, in
standby or under a finger. The strip is served whole every time: ESPHome's
http_request logs a 304 as a failed request. Firmware 0.2.77.

Alert button: esp_screens_show_alert takes action and data; the app
performs the action once when the button's report (esphome.screen_alert,
ok) comes from any screen. show_alert keeps its seven fields, so every
firmware from 0.2.31 has it.

Media card and full-page media tile: a title or artist line that is too
wide rolls by (LV_LABEL_LONG_SCROLL_CIRCULAR) instead of ending in dots.

Full-page tiles are white or their own pastel like every other tile; the
tint in the state colour of firmware 0.2.62 to 0.2.76 is gone.

Host harness (27 checks) and bench Guition + local add-on on the Yellow:
docs/TEST_RESULTS_0291.md. CYD firmware 1,633,728 B, 89.0 %.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/tests/components.spec.ts

@@ -183,6 +183,38 @@ describe("several tiles that go to the same page in the library (firmware 0.2.65
   });
 });
 
+describe("TileInspector: a live picture on a camera tile (app 0.2.91)", () => {
+  const row = (wrapper: ReturnType<typeof mount>, label: string) =>
+    wrapper.findAll(".f").find((f) => f.find(".f-label").exists() && f.find(".f-label").text() === label)!;
+  const choices = (wrapper: ReturnType<typeof mount>, label: string) => row(wrapper, label).findAll(".seg button").map((b) => b.text());
+  it("offers the live picture for a camera, with its pace once chosen, and says which firmware it needs", async () => {
+    state.inventory.entities.push({ id: "camera.front", name: "Front", state: "idle", area: "Hall" } as any);
+    const tile: Tile = { entity: "camera.front", name: "", slot: 0 };
+    state.layout!.tiles.push(tile);
+    const drawer = mount(TileInspector, { props: { tile } });
+    expect(choices(drawer, "Display")).toEqual(["Name and status", "Large value", "Live picture"]);
+    expect(row(drawer, "Refresh")).toBeUndefined();
+    await row(drawer, "Display").findAll(".seg button")[2].trigger("click");
+    expect(tile.options).toEqual({ display: "live" });
+    expect(choices(drawer, "Refresh")).toEqual(["Every 15 s", "Every 30 s"]);
+    expect(row(drawer, "Refresh").find('[aria-pressed="true"]').text()).toBe("Every 15 s");
+    expect(row(drawer, "Display").find("small").text()).toMatch(/firmware 0\.2\.77/);
+    expect(row(drawer, "Display").find("small").classes()).toContain("warn");
+    await row(drawer, "Refresh").findAll(".seg button")[1].trigger("click");
+    expect(tile.options).toEqual({ display: "live", refresh: 30 });
+    Object.assign(state.inventory.screens[0], { firmware: "0.2.77" });
+    await drawer.vm.$nextTick();
+    expect(row(drawer, "Display").find("small").text()).toMatch(/icon's place/);
+    expect(row(drawer, "Display").find("small").classes()).not.toContain("warn");
+    // A light has no such choice.
+    const lamp = mount(TileInspector, { props: { tile: { entity: "light.a", name: "", slot: 1 } } });
+    expect(choices(lamp, "Display")).not.toContain("Live picture");
+    // The mockup draws the picture's rounded square instead of the icon.
+    const card = mount(TileCard, { props: { tile, slot: 0 } });
+    expect(card.find(".ic").classes()).toContain("thumb");
+  });
+});
+
 describe("TileInspector: pages (app 0.2.78)", () => {
   const row = (wrapper: ReturnType<typeof mount>, label: string) =>
     wrapper.findAll(".f").find((f) => f.find(".f-label").exists() && f.find(".f-label").text() === label)!;