feat(settings): brand the Voices host pills with assistant logos + colors (#473)

entrypoints/settings/tabs/voices/VoicesPanel.tsx

@@ -21,13 +21,26 @@ export function VoicesPanel() {
         <div class="description" data-i18n="voicesSectionDescription">
           Choose the voice that reads replies aloud on each site.
         </div>
+        {/* Each pill wears its assistant's logo and brand color (#473) so
+            users orient at a glance — matching the platform cards on
+            saypi.ai/features/sites-supported. Logos are decorative (the pill
+            text is the accessible label), hence alt="" + aria-hidden; the
+            active state is also carried by aria-selected and font weight, so
+            color is never the only signal. Assets live in public/icons/logos/,
+            served from the extension root. */}
         <div id="voice-host-pills" role="tablist">
           <button
             type="button"
             id="voice-host-pi"
             class="voice-host-pill"
             role="tab"
           >
+            <img
+              class="voice-host-logo"
+              src="/icons/logos/pi.png"
+              alt=""
+              aria-hidden="true"
+            />
             Pi
           </button>
           <button
@@ -36,6 +49,12 @@ export function VoicesPanel() {
             class="voice-host-pill"
             role="tab"
           >
+            <img
+              class="voice-host-logo"
+              src="/icons/logos/claude.png"
+              alt=""
+              aria-hidden="true"
+            />
             Claude
           </button>
         </div>

entrypoints/settings/tabs/voices/voices-controller.ts

@@ -73,7 +73,11 @@ export class VoicesController {
     this.container
       .querySelectorAll<HTMLButtonElement>(".voice-host-pill")
       .forEach((pill) => {
-        pill.classList.toggle("active", pill.id === `voice-host-${host}`);
+        const isActive = pill.id === `voice-host-${host}`;
+        pill.classList.toggle("active", isActive);
+        // The pills are a tablist; state must be programmatic too, not just
+        // the brand-color accent (#473).
+        pill.setAttribute("aria-selected", String(isActive));
       });
 
     const [voices, current] = await Promise.all([

entrypoints/settings/tabs/voices/voices.css

@@ -6,17 +6,39 @@
   margin: 0.5rem 0 0.75rem;
 }
 .voice-host-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
   border: 1px solid #d1d5db;
   border-radius: 9999px;
   background: transparent;
   padding: 0.25rem 0.9rem;
   font-size: 0.85rem;
   cursor: pointer;
 }
+.voice-host-logo {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+/* The active pill takes on its assistant's brand palette (#473): Pi's forest
+   green on cream, Claude's terracotta on ivory. Weight + border + aria-selected
+   carry the state too — color is an accent, never the only signal. */
 .voice-host-pill.active {
   background: #e5e7eb;
   font-weight: 600;
 }
+#voice-host-pi.active {
+  background: #f5efe1;
+  border-color: #12805c;
+  color: #0b5c41;
+}
+#voice-host-claude.active {
+  background: #f8f0e9;
+  border-color: #d97757;
+  color: #ae5630;
+}
 .voice-shelf {
   margin-bottom: 0.75rem;
 }

test/settings/tabs/VoicesPanel.spec.tsx

@@ -28,4 +28,23 @@ describe("VoicesPanel", () => {
     ]);
     expect(container.querySelector("#voice-catalog")).toBeTruthy();
   });
+
+  it("brands each pill with its assistant's logo while keeping the text label (#473)", () => {
+    const { container } = render(<VoicesPanel />);
+    const piLogo = container.querySelector<HTMLImageElement>(
+      "#voice-host-pi img.voice-host-logo"
+    );
+    const claudeLogo = container.querySelector<HTMLImageElement>(
+      "#voice-host-claude img.voice-host-logo"
+    );
+    expect(piLogo?.getAttribute("src")).toBe("/icons/logos/pi.png");
+    expect(claudeLogo?.getAttribute("src")).toBe("/icons/logos/claude.png");
+    // Decorative images: the pill text stays the accessible label.
+    expect(piLogo?.getAttribute("alt")).toBe("");
+    expect(claudeLogo?.getAttribute("aria-hidden")).toBe("true");
+    expect(container.querySelector("#voice-host-pi")?.textContent?.trim()).toBe("Pi");
+    expect(
+      container.querySelector("#voice-host-claude")?.textContent?.trim()
+    ).toBe("Claude");
+  });
 });

test/settings/tabs/voices-controller.spec.tsx

@@ -60,6 +60,18 @@ describe("VoicesController", () => {
     expect(rows.length).toBe(flipDayClaude.length);
   });
 
+  it("mirrors the active pill into aria-selected, not just the color accent (#473)", async () => {
+    const { container } = await mount();
+    const pi = container.querySelector("#voice-host-pi")!;
+    const claude = container.querySelector("#voice-host-claude")!;
+    expect(pi.getAttribute("aria-selected")).toBe("true");
+    expect(claude.getAttribute("aria-selected")).toBe("false");
+    (claude as HTMLElement).click();
+    await flushAsync();
+    expect(pi.getAttribute("aria-selected")).toBe("false");
+    expect(claude.getAttribute("aria-selected")).toBe("true");
+  });
+
   it("groups a mixed-tier catalog into HD and Everyday shelves", async () => {
     const { container } = await mount();
     (container.querySelector("#voice-host-claude") as HTMLElement).click();