From 436a26a0fc97b3b6f626d030ac442fd3a0b33d9f Mon Sep 17 00:00:00 2001
From: Shane Maynard <snowspeeder@gmail.com>
Date: Sat, 29 Aug 2026 17:37:39 -0400
Subject: [PATCH] feat: show album art in the avatar square while music is
 loaded

The LED wall square switches to the track's cover art whenever a song is
loaded outside a conversation, and returns to the pulsing LED wall while
speaking to the agent (music and conversation are mutually exclusive, so
starting a talk hides the art and ending it restores it).
---
 web/index.html |  4 +++-
 web/style.css  | 29 +++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/web/index.html b/web/index.html
index 217ce05..17e13c8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -58,7 +58,9 @@
                 </div>
 
                 <div class="orb-stage">
-                    <div class="led-wall" id="ledWall" data-state="idle" aria-hidden="true"></div>
+                    <div class="led-wall" id="ledWall" data-state="idle" aria-hidden="true">
+                        <img id="ledArt" class="led-art" alt="">
+                    </div>
                     <div class="orb-labels" aria-live="polite">
                         <span class="state-label" id="stateLabel">Ready when you are</span>
                         <span class="thinking-chip" id="thinkingChip" hidden>Thinking&hellip;</span>
diff --git a/web/style.css b/web/style.css
index d103b96..b0a821d 100644
--- a/web/style.css
+++ b/web/style.css
@@ -371,6 +371,35 @@ button {
     transition: opacity 90ms linear, width 90ms linear, height 90ms linear;
 }
 
+/* Album art fills the square while a track is loaded outside a conversation. */
+.led-art {
+    position: absolute;
+    inset: 12px;
+    width: calc(100% - 24px);
+    height: calc(100% - 24px);
+    object-fit: cover;
+    border-radius: 18px;
+    z-index: 1;
+    opacity: 0;
+    transform: scale(0.96);
+    transition: opacity 240ms ease, transform 240ms ease;
+    pointer-events: none;
+}
+
+.led-wall.show-art .led-art {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.led-wall.show-art .led-dot {
+    opacity: 0 !important;
+    transition: none;
+}
+
+.led-wall.show-art {
+    filter: none;
+}
+
 /* Palette shifts by state — a cool blue while it listens, warm toward the
    center as the agent speaks, amber while thinking, dim when idle. */
 .led-wall[data-state="idle"] {