fix(web): show available state as a check glyph

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/icons.ts

@@ -28,6 +28,7 @@ const ICON_PATHS = {
     "M10.8 3.1l.7 1.7 1.7.7-1.7.7-.7 1.7-.7-1.7-1.7-.7 1.7-.7z",
   ],
   warning: ["M8 1.8l6.2 11H1.8z", "M8 5.3v3.4M8 11.2h.01"],
+  check: ["M3.2 8.4l3 3 6.6-6.8"],
 } as const;
 
 /** Stroke glyph on the shared 16-grid; the control's aria-label carries the meaning. */

web/src/main.ts

@@ -746,8 +746,20 @@ function chip(text: string, extra?: (chip: HTMLSpanElement) => void): HTMLSpanEl
   return span;
 }
 
-/** §4.2 state ramp on a media-state chip; the word carries, colour accelerates. */
+/**
+ * §4.2 state ramp on a media-state chip. `available` is a drawn check glyph —
+ * a shape, not only a hue, so it still reads greyscale — with the word kept
+ * as the chip's aria-label; every other state keeps the word on the chip.
+ */
 function mediaStateChip(state: string, wanted: boolean): HTMLSpanElement {
+  if (state === "available") {
+    return chip("", (span) => {
+      span.replaceChildren(icon("check"));
+      span.setAttribute("aria-label", state);
+      span.dataset.movieState = state;
+      span.dataset.wanted = String(wanted);
+    });
+  }
   return chip(state, (span) => {
     span.dataset.movieState = state;
     span.dataset.wanted = String(wanted);