feat(brand): replace the icon with the "Emitting" mark (#37)

The old mark was a green-to-blue gradient tile with a 3x3 grid — a palette
that says nothing about solar, and a grid abstract enough to belong to any
dashboard. The new one draws a Tigo optimizer reporting on the RS485 bus:
the potted body with its two DC leads, a six-block telemetry frame across
the face, and amber arcs carrying that frame onto the bus.

Palette is silicon indigo #1D2A63, busbar silver #C6D0E2, and amber
the identity and the site share a token rather than two near-identical
oranges. Amber means one thing everywhere it appears: this part is live.
The leading frame block is the amber one, matching where the opcode byte
sits in a real frame.

Drawn at three sizes instead of scaled, because the frame blocks are 6px
in a 64px field and a single file cannot survive the range:

  docs/images/logo.svg          full detail, 48px and up
  site/src/assets/logo.svg      32px: frame -> two bars, both arcs kept
  components/.../web/app.html   32px: same cut, device UI sidebar
  site/public/favicon.svg       16px: one bar, inner arc only
  tigo_web_server.cpp           16px: byte-identical to the above

The docs site had no logo or favicon configured at all and was serving the
Starlight default; both are now wired up in astro.config.mjs. Its favicon
matches the one the device itself serves, so a docs tab and a live-rig tab
carry the same icon.

Left alone deliberately: the dashboard's --accent green and chart
gradients, and the docs site's green link accent. Those are UI theme, not
the mark, and re-theming them is a separate decision.

Verified: site build passes with link validation, 37/37 site tests green,
favicon resolves under the /esphome-tigomonitor base path, and the
firmware was flashed to the rig and the sidebar mark confirmed on device.

Claude-Session: https://claude.ai/code/session_01RgSnMCa3JQigphGnPbazdw

Author: RAR

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+- **New brand mark.** The green-to-blue tile is replaced by an optimizer emitting a telemetry frame, in silicon indigo and amber. It's drawn at three sizes rather than scaled — the device favicon, the device UI sidebar, and the docs — so it stays legible in a browser tab. The docs site had no logo or favicon configured before and now carries the same mark the device serves.
+
 ### Fixed
 - **Opening the web UI could reboot the device.** History pages read the TSDB from the web server's task while the 30-minute snapshot writes it from another — and on the ESP32-S3 every flash access, read included, cuts the instruction cache on both cores, so the two collide and fault (`Fault - Unknown`). All LittleFS access now goes through one lock. History requests can queue briefly (a month-range query holds the flash ~2.3 s) and return an error rather than hang if they wait more than 15 s.
 

components/tigo_server/tigo_web_server.cpp

@@ -787,39 +787,30 @@ bool TigoWebServer::check_web_auth(httpd_req_t *req) {
 // ===== HTML Page Handlers =====
 
 esp_err_t TigoWebServer::favicon_handler(httpd_req_t *req) {
-  // Brand mark — same artwork as docs/images/logo.svg and the SPA sidebar
-  // brand-logo. Rounded gradient tile + 3x3 panel grid with a "live" cell
-  // highlight + faint telemetry pulse. Kept inline as a single string so we
-  // don't pay an extra HTTP round-trip + cache miss for an icon.
+  // Brand mark, small-size variant — an optimizer emitting a telemetry frame.
+  // Same drawing as docs/images/logo.svg and the SPA sidebar brand-logo, but
+  // the six-block frame on the body collapses to one amber bar and the outer
+  // bus arc is dropped: at 16px those details are sub-pixel and turn to mush.
+  // Kept inline as a single string so we don't pay an extra HTTP round-trip +
+  // cache miss for an icon.
   const char *favicon_svg =
     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>"
     "<defs>"
-      "<linearGradient id='b' x1='0' y1='0' x2='1' y2='1'>"
-        "<stop offset='0%' stop-color='#4ade80'/>"
-        "<stop offset='100%' stop-color='#38bdf8'/>"
+      "<linearGradient id='t' x1='0' y1='0' x2='0' y2='1'>"
+        "<stop offset='0%' stop-color='#16213B'/>"
+        "<stop offset='100%' stop-color='#0B111F'/>"
       "</linearGradient>"
-      "<radialGradient id='g' cx='50%' cy='40%' r='60%'>"
-        "<stop offset='0%' stop-color='#fff' stop-opacity='.85'/>"
-        "<stop offset='60%' stop-color='#fff' stop-opacity='.2'/>"
-        "<stop offset='100%' stop-color='#fff' stop-opacity='0'/>"
-      "</radialGradient>"
     "</defs>"
-    "<rect width='64' height='64' rx='14' fill='url(#b)'/>"
-    "<g transform='translate(10 10)' fill='#061018' fill-opacity='.18'>"
-      "<rect width='13' height='13' rx='2'/>"
-      "<rect x='15' width='13' height='13' rx='2'/>"
-      "<rect x='30' width='13' height='13' rx='2'/>"
-      "<rect y='15' width='13' height='13' rx='2'/>"
-      "<rect x='15' y='15' width='13' height='13' rx='2' fill-opacity='.55'/>"
-      "<rect x='30' y='15' width='13' height='13' rx='2'/>"
-      "<rect y='30' width='13' height='13' rx='2'/>"
-      "<rect x='15' y='30' width='13' height='13' rx='2'/>"
-      "<rect x='30' y='30' width='13' height='13' rx='2'/>"
+    "<rect width='64' height='64' rx='14' fill='url(#t)'/>"
+    "<rect x='9' y='18' width='33' height='27' rx='5' fill='#1D2A63' "
+      "stroke='#C6D0E2' stroke-width='4'/>"
+    "<rect x='16' y='28' width='19' height='7' rx='1' fill='#F4B23C'/>"
+    "<path d='M48 25 a12 12 0 0 1 0 14' fill='none' stroke='#F4B23C' "
+      "stroke-width='5' stroke-linecap='round'/>"
+    "<g fill='none' stroke='#C6D0E2' stroke-width='5' stroke-linecap='round'>"
+      "<path d='M17 45 v5 a4 4 0 0 1 -4 4 h-3'/>"
+      "<path d='M34 45 v5 a4 4 0 0 0 4 4 h3'/>"
     "</g>"
-    "<rect x='25' y='25' width='13' height='13' rx='2' fill='url(#g)'/>"
-    "<path d='M8 50 18 50 22 44 28 52 34 47 40 49 56 49' fill='none' "
-      "stroke='#061018' stroke-opacity='.55' stroke-width='2' "
-      "stroke-linecap='round' stroke-linejoin='round'/>"
     "</svg>";
 
   httpd_resp_set_type(req, "image/svg+xml");

components/tigo_server/web/app.html

@@ -686,39 +686,33 @@
   <aside>
     <div class="brand">
       <div class="brand-logo">
-        <!-- Same artwork as /favicon.svg and docs/images/logo.svg.
-             Inlined so the sidebar paints in the first frame without
-             a network round-trip. Compact gradient tile + 3x3 panel
-             grid with one "live" cell highlighted + a faint telemetry
-             pulse along the bottom. -->
+        <!-- Same drawing as /favicon.svg and docs/images/logo.svg: an
+             optimizer emitting a telemetry frame on the bus. Inlined so
+             the sidebar paints in the first frame without a network
+             round-trip. This renders at 32px, so the six-block frame on
+             the body collapses to two bars — at 3px per block the full
+             version is illegible. Both bus arcs still read at this size,
+             unlike the 16px favicon, which keeps only the inner one. -->
         <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-label="Tigo Monitor">
           <defs>
-            <linearGradient id="brand-bg" x1="0" y1="0" x2="1" y2="1">
-              <stop offset="0%" stop-color="#4ade80"/>
-              <stop offset="100%" stop-color="#38bdf8"/>
+            <linearGradient id="brand-tile" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#16213B"/>
+              <stop offset="100%" stop-color="#0B111F"/>
             </linearGradient>
-            <radialGradient id="brand-live" cx="50%" cy="40%" r="60%">
-              <stop offset="0%" stop-color="#fff" stop-opacity=".85"/>
-              <stop offset="60%" stop-color="#fff" stop-opacity=".2"/>
-              <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
-            </radialGradient>
           </defs>
-          <rect width="64" height="64" rx="14" fill="url(#brand-bg)"/>
-          <g transform="translate(10 10)" fill="#061018" fill-opacity=".18">
-            <rect width="13" height="13" rx="2"/>
-            <rect x="15" width="13" height="13" rx="2"/>
-            <rect x="30" width="13" height="13" rx="2"/>
-            <rect y="15" width="13" height="13" rx="2"/>
-            <rect x="15" y="15" width="13" height="13" rx="2" fill-opacity=".55"/>
-            <rect x="30" y="15" width="13" height="13" rx="2"/>
-            <rect y="30" width="13" height="13" rx="2"/>
-            <rect x="15" y="30" width="13" height="13" rx="2"/>
-            <rect x="30" y="30" width="13" height="13" rx="2"/>
+          <rect width="64" height="64" rx="14" fill="url(#brand-tile)"/>
+          <rect x="9" y="17" width="34" height="28" rx="5"
+                fill="#1D2A63" stroke="#C6D0E2" stroke-width="3.5"/>
+          <rect x="16" y="24" width="20" height="5" rx="1" fill="#C6D0E2" fill-opacity=".65"/>
+          <rect x="16" y="34" width="13" height="5" rx="1" fill="#F4B23C"/>
+          <g fill="none" stroke="#F4B23C" stroke-width="4" stroke-linecap="round">
+            <path d="M48 25 a11 11 0 0 1 0 14"/>
+            <path d="M53 19 a19 19 0 0 1 0 26"/>
+          </g>
+          <g fill="none" stroke="#C6D0E2" stroke-width="4.5" stroke-linecap="round">
+            <path d="M17 45 v5 a4 4 0 0 1 -4 4 h-4"/>
+            <path d="M35 45 v5 a4 4 0 0 0 4 4 h4"/>
           </g>
-          <rect x="25" y="25" width="13" height="13" rx="2" fill="url(#brand-live)"/>
-          <path d="M8 50 18 50 22 44 28 52 34 47 40 49 56 49"
-                fill="none" stroke="#061018" stroke-opacity=".55"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
       <div>

docs/images/logo.svg

@@ -9,6 +9,12 @@ export default defineConfig({
   integrations: [
     starlight({
       title: 'Tigo Monitor',
+      // "Emitting" brand mark. Three cuts of the same drawing, each tuned to
+      // its render size — see the comments in each file. The favicon matches
+      // the one the device itself serves, so a docs tab and a live-rig tab
+      // carry the same icon.
+      logo: { src: './src/assets/logo.svg' },
+      favicon: '/favicon.svg',
       customCss: [
         // Self-hosted fonts (bundled, no CDN). Order matters: fonts first.
         '@fontsource/ibm-plex-sans/400.css',